js 輪播效果實例分享
更新時間:2016年12月28日 09:57:14 作者:xiaoliu12
本文主要分享了基于js實現(xiàn)的輪播效果的實例代碼,具有一定的參考價值,下面跟著小編一起來看下吧
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) { //當?shù)阶詈笠粡垐D片時 index = 0 } else { index++; //圖片索引發(fā)生改變 } 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); } })(); }
以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關文章
JavaScript 事件屬性綁定帶參數(shù)的函數(shù)
在JavaScript中,為了實現(xiàn)表現(xiàn)和控制相分離,可以通過0級的DOM事件屬性或者2級的事件模型來實現(xiàn),不過這兩者在針對某個事件類型調用相應的事件句柄的時候,不能給事件句柄提供參數(shù),也就是說,事件屬性的值只能是一個函數(shù)引用。2009-03-03Javascript動態(tài)創(chuàng)建div的方法
這篇文章主要介紹了Javascript動態(tài)創(chuàng)建div的方法,是javascript節(jié)點操作的典型應用,非常具有實用價值,需要的朋友可以參考下2015-02-02JavaScript實現(xiàn)對下拉列表值進行排序的方法
這篇文章主要介紹了JavaScript實現(xiàn)對下拉列表值進行排序的方法,實例分析了javascript對下拉列表元素的遍歷與排序實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07javascript支持firefox,ie7頁面布局拖拽效果代碼
javascript 拖拽 頁面拖拽 拖拽效果的頁面 超級拖拽 javascript支持firefox,ie7頁面布局拖拽效果代碼 鼠標拖拽2007-12-12ionic2屏幕適配實現(xiàn)適配手機、平板等設備的示例代碼
本篇文章主要介紹了ionic2屏幕適配實現(xiàn)適配手機、平板等設備的示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-08-08