<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ margin: 0; padding: 0; } #box{ 800px; height: 380px; margin: 30px auto; position: relative; } #box .item{ display: none; } #box .active{ display: block; } #box .dots{ position: absolute; left: 50%; bottom: 15px; transform: translateX(-50%); list-style: none; } #box .dots li{ display: inline-block; 10px; height: 10px; border-radius: 50%; border: 1px solid #eee; margin-right: 16px; } #box .dots .active{ background: #eee; } #box .arrow{ position: absolute; top: 50%; display: block; 24px; height: 24px; background-size:24px 24px; transform: translateY(-50%); } #box .left{ left: 20px; background-image: url(images/arrow-left.png); } #box .right{ right: 20px; background-image: url(images/arrow-right.png); } .right:hover{ cursor: pointer; } .left:hover{ cursor: pointer; } .dots li:hover{ cursor: pointer; } </style> </head> <body> <div id="box"> <div class="pics"> <div class="item active"> <img src="images/001.jpg" alt=""> </div> <div class="item"> <img src="images/002.jpg" alt=""> </div> <div class="item"> <img src="images/003.jpg" alt=""> </div> <div class="item"> <img src="images/004.jpg" alt=""> </div> </div> <ul class="dots"> <li class="active"></li> <li></li> <li></li> <li></li> </ul> <span class="arrow left"></span> <span class="arrow right"></span> </div> <script> var index=0; var pics=document.getElementsByClassName("item"); var lis =document.getElementsByClassName("dots")[0].getElementsByTagName("li"); function changeNext() { pics[index].className="item"; lis[index].className=""; index++; index=index%pics.length; pics[index].className="item active"; lis[index].className="active"; } var t=setInterval(changeNext,3000); document.getElementsByClassName("right")[0].onclick=function () { changeNext(); }; document.getElementsByClassName("left")[0].onclick=function () { pics[index].className="item"; lis[index].className=""; lis[index].className=""; index=(index+pics.length-1)%pics.length; pics[index].className="item active"; lis[index].className="active"; }; document.getElementById("box").onmouseover=function () { clearInterval(t); }; document.getElementById("box").onmouseout=function () { t=setInterval(changeNext,3000); }; for(var i=0; i<lis.length;i++){ lis[i]._index = i; lis[i].onclick=function () { var j=this._index; lis[index].className=""; lis[j].className="active"; pics[index].className="item"; pics[j].className="item active"; index=j; }; } </script> </body> </html>