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>