<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> *{ margin:0; padding:0; } li{ list-style:none; float:left; } div{ width:1226px; height:460px; position:relative; border:1px solid #ccc; margin:0 auto; } img{ width:1226px; height:460px; display:none; } img.active{ display:block; } .prev,.next{ position:absolute; top:200px; font-size:40px; color:white; width:40px; height:70px; text-align:center; line-height:70px; } .prev{ left:0px; } .next{ right:0px; } .prev:hover,.next:hover{ backgroud-color:rgba(0,0,0,0.6); } ul{ position:absolute; bottom:20px; right:20px; } ul li{ width:6px; height:6px; background-color:rgba(0,0,0,0.4); border-radius:50%; margin-right:10px; display:inline-block; } ul::after{ content:""; display:block; clear:both; } li.active{ background-color:white; } </style></head><body> <div id="box"> <img class="active" src="1.png"> <img src="2.png"> <img src="3.png"> <img src="4.png"> <img src="5.png"> <p class="prev"><</p> <p class="next">></p> <ul> <li class="active"></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <script> /* 1、点击小圆点切换对应的图片 2、点击左右箭头切换 3、主动轮播 */ var imgs=document.getElementsByTagName('img'); var lis=document.getElementsByTagName('li'); var prev=document.getElementsByClassName('prev')[0]; var next=document.getElementsByClassName('next')[0]; var index = 0; //小圆点的点击事件，点击的时候图片发生变化 for(var i=0;i<lis.length;i++){ lis[i] = index;//存下标 lis[i].onclick = fucntion(){ for(var j=0;j<imgs.length;j++){ imgs[index].className = ''; imgs[j].className = ''; lis[j].className = ''; } imgs[this.index].className = 'active'; this.className = 'active'; index = this.index; } } //指向上一张的按钮被点击时 prev.onclick = function(){ lis[index].className = ''; imgs[index].className = ''; index--; if(index<0){ index = lis.length-1;//让它等于最大的下标 } lis[index].className = 'active'; imgs[index].className = 'active'; } //指向下一张的按钮被点击时 next.onclick = function(){ lis[index].className = ''; imgs[index].className = ''; index++; if(index == lis.length){ index = 0; } lis[index].className = 'acitve'; imgs[index].className = 'active'; } var timer; box.onmouseenter = function(){ clearInterval(timer);//鼠标一进去，进行轮播 } box.onmouseleave = function(){ set();//鼠标进去，继续执行set(); } function set(){ timer = setInterval(fucntion(){ lis[index].className = ''; imgs[index].className = ''; index++; if(index == lis.length){ index = 0; } lis[index].className = 'active'; imgs[index].classNmae = 'active'; },2000); } set(); </script></body></html>