JS轮播图案例

介绍

该案例用到的主要知识点时定时器setInterval(function,间隔时间(单位毫秒))

HTM代码

<div class="wrap">
			<ul>
				<li><img src="" alt="" class="red"></li>
				<li><img src="" alt="" class="green"></li>
				<li><img src="" alt="" class="blue"></li>
				<li><img src="" alt="" class="black"></li>
				<li><img src="" alt="" class="pink"></li>
			</ul>
		</div>

CSS样式

	*{
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}
			.wrap{
				position: relative;
				height: 500px;
				width: 889px;
				margin: 80px auto;
				overflow: hidden;
			}
			ul{
				width: 500%;
				height: 100%;
			}
			li{
				list-style: none;
				float: left;
				width: 20%;
				height: 100%;
			}
			.red{
				background-color: red;
			}
			.green{
				background-color: green;
			}
			.blue{
				background-color: blue;
			}
			.pink{
				background-color: pink;
			}
			.black{
				background-color: black;
			}
			img{
				height: 100%;
				width: 100%;
			}

JS代码

var ul=document.querySelector('ul');
			var wrap=document.querySelector('.wrap');
			var w=wrap.offsetWidth;
			console.log(ul);
			console.log(w);
			var index=0;
			setInterval(() => {
				index++;
				if(index===4){
					index=0;
				}
				var translatX = -index * w;
				ul.style.transform = 'translateX(' + translatX + 'px)';
			}, 2000);