js写一个小米首页轮播图

效果如图

图片的切换有过渡效果
有小圆点和按钮点击切换
有鼠标放置停止轮播
左边的按钮已经预留了小米官网的左侧列表空间
所以
css

<style>
			*{margin:0;padding:0;}
			li{list-style:none;}
			.box{
				width:1226px;
				height:460px;
				/* background:red; */
				margin:0 auto;
				position: relative;
			}
			.imgs{
				width:100%;
				height:100%;
				position: relative;
			}
			.imgs>li{
				width:100%;
				height:100%;
				position: absolute;
				top:0;
				left:0;
				opacity: 0;
				transition: all .5s linear;
			}
			.imgs>li.show{
				opacity: 1;
			}
			.imgs>li>img{
				display: block;
				width:100%;
				height:100%;
			}
			.cirs{
				width:100px;
				height:20px;
				/* background:red; */
				position: absolute;
				right:20px;
				bottom:20px;
			}
			.cirs>li{
				width:10px;
				height:10px;
				background:rgba(0,0,0,.5);
				float:left;
				margin:5px;
				border-radius: 10px;
				transition: all .5s linear;
			}
			.cirs>li.cbg{
				background:rgba(255,255,255,.5);
			}
			
			.left{
				width: 41px;
				height: 69px;
				background-color: transparent;
				color: lightgray;
				font-size: 36px;
				text-align: center;
				line-height: 65px;
				position: absolute;
				top: 195.5px;
				left: 234px;
				cursor: pointer;
				z-index: 2;
			}
			.left:hover{
				background-color: rgba(42, 42, 42, 0.8);
				color: white;
			}
			.right{
				width: 41px;
				height: 69px;
				background-color: transparent;
				color: lightgray;
				font-size: 36px;
				text-align: center;
				line-height: 65px;
				position: absolute;
				top: 195.5px;
				right: 0;
				cursor: pointer;
			}
			.right:hover{
				background-color: rgba(42, 42, 42, 0.8);
				color: white;
			}
		</style>

html

<div class="box">
			<ul class="imgs">
				<li class="show"><img src="img/1.jpg" ></li>
				<li><img src="img/2.webp" ></li>
				<li><img src="img/3.webp" ></li>
				<li><img src="img/4.webp" ></li>
				<li><img src="img/5.webp" ></li>
			</ul>
			<ul class="cirs">
				<li class="cbg"></li>
				<li></li>
				<li></li>
				<li></li>
				<li></li>
			</ul>
			<div class="left"><</div>
			<div class="right">></div>
		</div>

js

<script> 
			/*
				图片以及小圆点的自动切换
				点击小圆点切换图片
				点击左右按钮切换图片
			*/
		   //获取元素
		   var imgs = document.querySelectorAll('.imgs>li');
		   //console.log(imgs);
		   var cirs = document.querySelectorAll('.cirs>li');
		   var box = document.querySelector('.box');
		   var num = 0;
		   var left = document.getElementsByClassName('left')[0];
		   var right = document.getElementsByClassName('right')[0];
		   //设置定时器
		   var time = setInterval(run,2000);
		   
		   //给box绑定事件
		   box.onmouseover = function(){
			   clearInterval(time);
		   }
		   box.onmouseout = function(){
			   time = setInterval(run,2000);
		   }
		   
		   function run(){
			   clear();
			   num++;
			   if(num>=imgs.length){
				   num = 0;
			   }
			   //设置指定图片显示
			   imgs[num].setAttribute('class','show');
			   cirs[num].setAttribute('class','cbg');
		   }
		   
		   //给小圆点绑定点击事件
		   for(var i=0;i<cirs.length;i++){
			   cirs[i].index = i;
			   cirs[i].onclick = function(){
				   clear();
				   num = this.index;
				   imgs[num].setAttribute('class','show');
				   cirs[num].setAttribute('class','cbg');
			   }
		   }
		   
		   function clear(){
			   for(var i=0;i<imgs.length;i++){
				   imgs[i].removeAttribute('class');
				   cirs[i].removeAttribute('class');
			   }
		   }
		   
		   //给左右按钮绑定点击事件
		   right.onclick = function(){
			   clear();
			   if(num == 4){
				   num = 0;
				   imgs[num].setAttribute('class','show');
				   cirs[num].setAttribute('class','cbg');
			   }else{
				   num++;
				   imgs[num].setAttribute('class','show');
				   cirs[num].setAttribute('class','cbg');
				   console.log(num);
			   }
		   }
		   left.onclick = function(){
			   clear();
			   if(num == 0){
				   num = 4;
				   imgs[num].setAttribute('class','show');
				   cirs[num].setAttribute('class','cbg');
			   }else{
				   num--;
				   imgs[num].setAttribute('class','show');
				   cirs[num].setAttribute('class','cbg');
				   console.log(num);
			   }
		   }
		</script>