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); } })();}
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持武林網!
新聞熱點
疑難解答