一个好看的轮播图效果

用js实现了一个好看的动态轮播图
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>swiper</title>
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			div {
				border: 1px solid red;
				height: 350px;
				max-width: 750px;
				display: flex;
				position: relative;
				margin: auto;
				overflow: hidden;
			}
			div>div {
				width: 750px;
				position: absolute;
				border: 0px solid blue;
				margin: auto;
				
			}
			div>div:nth-child(1) {
				background: blueviolet;
				background: url(img/niubi.jpg) no-repeat;
				z-index: 5;
			}
			div>div:nth-child(2) {
				background: aqua;
				background: url(img/xuexi.jpg) no-repeat;
				z-index: 4;
			}
			div>div:nth-child(3) {
				background: brown;
				background: url(img/car.jpg) no-repeat;
				z-index: 3;
			}
			div>div:nth-child(4) {
				background: burlywood;
				background: url(img/Miboy.jpg) no-repeat;
				z-index: 2;
			}
			div>div:nth-child(5) {
				background: burlywood;
				background: url(img/BTB.jpg) no-repeat;
				z-index: 1;
			}
			div>div:nth-child(6) {
				background: blueviolet;
				background: url(img/niubi.jpg) no-repeat;
				z-index: 0;
			}
			.trs {
				transition: transform 1.5s;
			}
		</style>
	</head>
	<body>
		<div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<script type="text/javascript">
			let divAll = document.querySelectorAll('div div')
			let index= 0,i= 0;
			let der = 1600;
			let interval = setInterval(()=>{
				der= 1600
				index += 800
				divAll[i].classList.add('trs')
				divAll[i].style.transform =  "translateX("+(-1000)+"px)"
				i++
				if (i == divAll.length) {
					for (let i in Array.from(divAll)) {
						divAll[i].classList.remove('trs')
						divAll[i].style.transform =  "translateX("+0+"px)"
						}
					der= 16;
					i=0
				}
			},der)
		</script>
	</body>
</html>
来源：CSDN
作者：Leisure_Time
链接：https://blog.csdn.net/weixin_45615791/article/details/103605228
标签
轮播