轮播图
需求:
1.鼠标不在图片上方时，进行自动轮播，并且左右箭头不会显示；当鼠标放在图片上方时，停止轮播，并且左右箭头会显示；
2.图片切换之后，图片中下方的小圆点会同时进行切换，并且点击相应的小圆点可以切换到相应的图片上；
3.点击左右箭头可以进行左右图片的切换；
4.图片上需有介绍的文字，会随图片切换一起进行切换。
实现原理：
通过定时器设定时间来实现自动轮播，用display: none属性加上伪类hover实现鼠标显示消失，索引后用onclick实现点击切换图片，用z-index，点击实现最高级，其余最低级来显示图片
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{font-size: 12px;margin: 0;padding: 0;}ul{list-style: none;}.box{width: 1000px;height: 460px;position: relative;}.ul1{width: 100%;height: 100%;}.ul1>li{position: absolute;top: 0;left: 0;}.left_botton{width:35px ;height: 70px;background-color: #00000050;color: #fff;text-align: center;line-height: 70px;position: absolute;top: 195px;left: 0;font-size: 25px;border-radius: 0 5px 5px 0;display: none;}.right_botton{width:35px ;height: 70px;background-color: #00000050;color: #fff;text-align: center;line-height: 70px;position: absolute;top: 195px;right: 0;font-size: 25px;font-size: 25px;border-radius: 5px 0 0 5px;display: none;}.ul2{position: absolute;bottom: 20px;right: 100px;}.ul2>li{width: 20px;height: 20px;background-color: #fff;text-align: center;line-height: 20px;float: left;border-radius: 100%;margin-right: 10px;}.ul2>li:hover{background-color:wheat;color:aqua;}.ul2>li:nth-child(1){background-color:wheat;color:aqua;}.ul1>li:nth-child(1){z-index: 100;}.indexs{z-index: 1000;}.box:hover .left_botton{display: block;}.box:hover .right_botton{display: block;}</style>
</head>
<body><div class="box"><ul class="ul1" id="ul1"><li><img src="./素材库/1.jpg" width="1000px" height="460px"></li><li><img src="./素材库/2.jpg" width="1000px" height="460px"></li><li><img src="./素材库/3.jpg" width="1000px" height="460px"></li><li><img src="./素材库/4.jpg" width="1000px" height="460px"></li></ul><div class="left_botton indexs" id="left_botton"><</div><div class="right_botton indexs" id="right_botton">></div><ul class="ul2 indexs" id="ul2"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div><script>var imgs = document.getElementById("ul1").children;// 找到索引的所有li标签var botton = document.getElementById("ul2").children;var left_botton=document.getElementById("left_botton")var right_botton=document.getElementById("right_botton")var index = 0var dingshiqifunction chongqi(){dingshiqi=setInterval(function(){index++if(index==imgs.length){index=0}for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"}imgs[index].style.cssText="z-index:100;"},1500)}dingshiqi=setInterval(function(){index++if(index==imgs.length){index=0}for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"botton[i].style.cssText="background-color:#fff;color:#000";}imgs[index].style.cssText="z-index:100;"botton[index].style.cssText=" background-color:wheat;color:aqua;"},2000)//绑定点击事件left_botton.onclick=function(){clearInterval(dingshiqi)index--if(index<0){index=imgs.length-1}for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"botton[i].style.cssText="background-color:#fff;color:#000";}imgs[index].style.cssText="z-index:100;"botton[index].style.cssText=" background-color:wheat;color:aqua;"chongqi()}right_botton.onclick=function(){clearInterval(dingshiqi)index++if(index>imgs.length-1){index=0}for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"botton[i].style.cssText="background-color:#fff;color:#000";}imgs[index].style.cssText="z-index:100;"botton[index].style.cssText="background-color:wheat;color:aqua;"chongqi()}botton[0].onclick=function(){clearInterval(dingshiqi)index=0for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"botton[i].style.cssText="background-color:#fff;color:#000";}imgs[index].style.cssText="z-index:100;"botton[0].style.cssText="background-color:wheat;color:aqua;"chongqi()}botton[1].onclick=function(){clearInterval(dingshiqi)index=1for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"botton[i].style.cssText="background-color:#fff;color:#000;"}imgs[index].style.cssText="z-index:100;"botton[1].style.cssText="background-color:wheat;color:aqua;"chongqi()}botton[2].onclick=function(){clearInterval(dingshiqi)index=2for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"botton[i].style.cssText="background-color:#fff;color:#000";}imgs[index].style.cssText="z-index:100;"botton[2].style.cssText="background-color:wheat;color:aqua;"chongqi()}botton[3].onclick=function(){clearInterval(dingshiqi)index=3for(var i=0;i<imgs.length;i++){imgs[i].style.cssText="z-index:0;"botton[i].style.cssText="background-color:#fff;color:#000";}imgs[index].style.cssText="z-index:100;"botton[3].style.cssText="background-color:wheat;color:aqua;"chongqi()}</script>
</body>
</html>
