示例代码：
<html> <head> <!--http://www.jb51.net/article/64662.htm --> <style type="text/css"> body{ margin:0px; <!--这两句必写，避免在不同浏览器中显示时发生错位--> padding:0px; } img{ width:320px;height:200px;} ul li{ list-style:none; float:left; padding:5px; margin-right:5px; border:1px solid gray; } ul{ position:relative; margin-right:10px; margin-top:20px; } .dq{ background-color:red; color:white; } </style> </head> <body> <div id="imglunbo"> <img id="imgDemo" src= "1.jpg"/> </div> <script> //把数字弄出来 var imgs = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]; //依据图片数组的数量，创建一个ul。里面包含数组数量的li function createImageNums(){ var myul = document.createElement("ul"); for(var i=1;i <= imgs.length;i++){ var myli = document.createElement("li"); var mynum = document.createTextNode(i); if(i==1){ myli.setAttribute("class","dq"); } myul.appendChild(myli); myli.appendChild(mynum); //因为要实现点击li时，理解切换 //所以这里给li添加了一个onclick单击事件 myli.onclick = qiehuan; } var imglunbo = document.getElementById("imglunbo"); imglunbo.appendChild(myul); } //createImageNums end createImageNums(); //自动切换图片 var currentIndex = 0;//当前的图片在数组中的索引值 function changeImg(){ var myimg = document.getElementById("imgDemo"); myimg.src = imgs[currentIndex]; changestyle(currentIndex); currentIndex++; //因为不断增加会导致索引越界，所以需要归0 if(currentIndex==imgs.length){ currentIndex = 0; } } function changestyle(num){ var allli=document.getElementsByTagName("li"); for(var i=0;i<allli.length;i++){ allli[i].setAttribute("class",""); } allli[num].setAttribute("class","dq"); } var autoChange = setInterval(changeImg,3000); //3.点击数字时，立即切换图片 // 切换成功之后，自动切换图片的功能还能生效 function qiehuan(){ //假定10秒自动，此时刚切换图片之后 //过了3秒，如果点击数字切换，不清掉定时器 //就会导致7秒之后又自动切换 clearInterval(autoChange); var clickedNum = parseInt(this.innerText); currentIndex = clickedNum-1; console.log(currentIndex); changeImg(); autoChange = setInterval(changeImg,3000); } </script> </body> </html>
运行结果：
