<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ border:1px solid red ; width:500px ; height:200px ; padding:6px ; margin:0 auto ; position: relative; } .box ul{ list-style:none ; position:absolute ; bottom: 0px; left:135px ; } .box ul li{ display: inline-block; border: 1px solid chocolate; padding:2px 6px ; color:#fff ; cursor:pointer ; } .box ul li.active{ background:chocolate ; color:black ; } </style> </head> <body> <div class="box" id="box"> <img src="img/1.jpg" /> <ul> <li class="active" data-num="1">1</li> <li data-num="2">2</li> <li data-num="3">3</li> <li data-num="4">4</li> <li data-num="5">5</li> </ul> </div> </body> <script type="text/javascript"> var box=document.getElementById("box"); var img=box.children[0]; var ul = box.children[1]; var ullist=ul.children; var imgs=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]; var i=1; function change_img(){ for (var k=0;k<ullist.length;k++) { ullist[k].className="" } ullist[i].className="active"; img.src=imgs[i]; i++; if (i>=imgs.length) { i=0; } } var time = setInterval("change_img()",1000); box.onmouseover=function(){ clearInterval(time); } box.onmouseout=function(){ time=setInterval("change_img()",1000); } //为所有li标签添加事件 for (var k=0;k<ullist.length;k++) { ullist[k].onclick=click_li; } function click_li(){ i=this.dataset.num-1; change_img(); } </script> </html>
运行：
图片自动轮播 document.getElementById(" ")
原文：https://www.cnblogs.com/jiangaihu/p/10955126.html