js 轮播效果实例分享

html

<!--图片轮播   Start-->
<div class="pics-ul">
 <div class="pics-ulleft">              
   <ul id="allImg">
     <li><img src="img/img01.png"/></li>  
     <li><img src="img/img2.jpg"/></li>  
     <li><img src="img/img1.jpg"/></li>  
     <li><img src="img/img3.jpg"/></li>  
     <li><img src="img/img4.jpg"/></li>  
   </ul>
   <a name="btn" id="prev" class="prev" style="display: block;"></a>
   <a name="btn" id="next" class="next" style="display: block;"></a>
    <ul id="btn" class="pagination">
    <li class="hover"><a href="#0">1</a></li>
    <li><a href="#1">2</a></li>
    <li><a href="#2">3</a></li>
    <li><a href="#3">4</a></li>
    <li><a href="#4">5</a></li>
    </ul>
    </div>
    <div class="pics-ulright"><img src="img/imgright.png"/></div>
    </div>
<!--图片轮播   End-->

js

/*图片轮播*/
var but1 = document.getElementById("prev");
var abtn = document.getElementById("btn").getElementsByTagName("li"); //获取所有的按钮
var lis = document.getElementById('allImg').getElementsByTagName('li');
var but2 = document.getElementById("next");
var index = 0;
var timer = null;
but2.onclick = function() {

index++;
 if (index > lis.length - 1) {
   index = 0;
 }
 setImg(index);

}
but1.onclick = function() {
 index--;
 if (index < 0) {
   index = lis.length - 1;
 }
 setImg(index);

}
function changeImg() {
 if (index == lis.length - 1) { //当到最后一张图片时
   index = 0
 } else {
   index++; //图片索引发生改变
 }
 setImg(index);
}
function setImg(index) {
 for (j = 0; j < lis.length; j++) {
   lis[j].style.display = "none";
 }

lis[index].style.display = "block";
 //按钮的样式要与图片对应
 for (var i = 0; i < abtn.length; i++) {
   abtn[i].className = ""
 }
 abtn[index].className = "hover";
}
//自动切换
timer = setInterval(changeImg, 3000);
//按钮
for (var i = 0; i < abtn.length; i++) {
 (function() {
   var p = i
   abtn[p].onclick = function() {
     index = p;
     setImg(index);
   }

})();
}

来源：http://www.cnblogs.com/xiaoliu12/p/6225999.html