代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> *{ padding:0; margin:0; } #autoPly ol{ position: absolute; bottom: 0; right:0; z-index: 2; } .number{ background-color: #FFB132; color: red; } .order li { display: inline-block; margin: 10px; background-color: aliceblue; color: black; padding: 0 5px; cursor: pointer; } #autoPly{ position: relative; padding: 0; margin: 0; width: 400px; height: 100px; overflow: hidden; position: relative; } #pic{ position: absolute; top: 0; } #pic li{ height:100px;//必须要对li的高度进行声明 list-style-type: none; } #pic img{ width: 400px; height: 100px; padding: 0; margin: 0; } </style> </head> <body> <div id="autoPly"> <ol class="order"> <li class="number" style="background-color: red">1</li> <li>2</li> <li>3</li> <li>4</li> </ol> <ul id="pic"> <li><a href="#"><img src="images/wp_ss_20160503_0001.png"></a></li> <li><a href="#"><img src="images/wp_ss_20160503_0002.png"></a></li> <li><a href="#"><img src="images/wp_ss_20160503_0003.png"></a></li> <li><a href="#"><img src="images/wp_ss_20160503_0004.png"></a></li> </ul> </div> <script src="jquery-1.12.0.min.js"></script> <script> window.onload=function (){ var pic=document.getElementById("pic"); var order=document.getElementsByClassName("order"); var orderLi=$(".order li");//选取li标签 var now=0; for(i=0;i<orderLi.length;i++){//for 遍历，给每个li元素添加行为 orderLi[i].index=i; orderLi[i].onclick = function () { now=this.index; tab();//点击时调用tab（），函数，实现位置改变 } } function tab(){//轮播图图片切换时的代码 for(i=0;i<orderLi.length;i++){//首先遍历，先将所有颜色改变 orderLi[i].style="background-color:aliceblue"; }
//再单独改变你要点击的那个style值
orderLi[now].style="background-color:red";//为什么要用this，而不是orderLi[i] pic.style.top=(-100)*now+"px";//改变位置 } function next(){ now++; if(now==orderLi.length){ now=0; } tab(); }
setInterval(next,2000);//设定时间间隔，每隔两秒调用next， } </script> </body> </html>
笔记：
轮播图中的两种行为：1，自动轮播：设定setinterval函数，每隔一段时间调用，改变位置，只需要改变位置即可，这里是在2s后的间隔后调用的函数now++；
2，点击下面相应的数字序号后，会调到相应的图片，这里也是通过改变now来完成的
3，tab（）函数仅仅完成的是一个图片的切换过程