Javascript實現(xiàn)圖片輪播效果(二)圖片序列節(jié)點的控制實現(xiàn)
推薦閱讀:Jquery代碼實現(xiàn)圖片輪播效果(一)
在上篇文章給大家介紹了Javascript實現(xiàn)圖片輪播效果(一)讓圖片跳動起來,這里我們實現(xiàn)圖片序列節(jié)點的跳轉(zhuǎn)實現(xiàn).在圖片跳轉(zhuǎn)的同時,我們一般需要知道他跳轉(zhuǎn)的是哪個位置,這里就是圖片序列節(jié)點需要跟圖片一同顯示.下面我們就直接作分析.
在沒講正文之前先給大家展示效果圖:
在HTML,CSS代碼結(jié)構(gòu)中我們需要加入一個圖片序列是否選中的樣式
#slider ol li a.active{ background-color: #ffffff; color: #ff0000; }
JS代碼中我們需要對上一篇文章的JS代碼做一些改變和增加,這里首先要改變的是將跳轉(zhuǎn)的代碼做一次封裝,封裝到一個方法中,然后返回setInterval的值.這個主要是為序列節(jié)點實現(xiàn)一些功能.
然后在跳轉(zhuǎn)代碼中,改變相應的序列節(jié)點的樣式,為了能夠展示跳轉(zhuǎn)的位置.
//圖片節(jié)點 var slider = document.getElementById("slider"); var imgul = slider.getElementsByTagName("ul")[0]; var imglis = imgul.getElementsByTagName("li"); var len = imglis.length; //圖片序列節(jié)點 var numol = slider.getElementsByTagName("ol")[0]; var numlinks = numol.getElementsByTagName("a"); //共享序列 var index = 0; //圖片跳轉(zhuǎn),圖片跳轉(zhuǎn)的同時,改變序列節(jié)點的跳轉(zhuǎn) var jump = function () { return setInterval(function(){ if(index >= len){ index = 0; } //圖片跳轉(zhuǎn) imgul.style.left = - (800 * index) + "px"; //改變序列節(jié)點樣式:首先要清除所有的鏈接的樣式,然后在激活對應的序列節(jié)點樣式 for (var i = 0; i < len; i++) { numlinks[i].setAttribute("class",""); } numlinks[index].setAttribute("class","active"); index++; },2000); }; var jumpindex = jump();
這里還需要加入序列節(jié)點的hover狀態(tài)下的控制.
hover后圖片跳轉(zhuǎn)應該停止,應停留在hover下的圖片展示這里序列節(jié)點的數(shù)目與圖片的數(shù)目是相對應的,因此可以通過當前序列節(jié)點所在的位置來改變其他的狀態(tài).
當鼠標離開序列節(jié)點后,應當讓圖片繼續(xù)自動跳轉(zhuǎn).
//增加序列節(jié)點的hover控制: 1. hover后要禁止圖片的跳轉(zhuǎn),顯示在當前的圖片上,這里就需要清除跳轉(zhuǎn) 2.hover離開后,在當前的圖片上做圖片的跳轉(zhuǎn) for (var i = 0; i < len; i++){ //hover numlinks[i].onmouseover = function () { clearInterval(jumpindex); for (var i = 0; i < len; i++) { numlinks[i].setAttribute("class",""); if (numlinks[i] === this){ index = i; } } imgul.style.left = - (800 * index) + "px"; numlinks[index].setAttribute("class","active"); } //out numlinks[i].onmouseout = function(){ jumpindex = jump(); } }
這樣我們就完成了第二步的效果.到此本文的全部敘述也就給大家介紹完了,希望對大家有所幫助。
- 基于cssSlidy.js插件實現(xiàn)響應式手機圖片輪播效果
- Bootstrap 最常用的JS插件系列總結(jié)(圖片輪播、標簽切換等)
- 用JS實現(xiàn)圖片輪播效果代碼(一)
- 原生JS實現(xiàn)旋轉(zhuǎn)木馬式圖片輪播插件
- 基于javascript實現(xiàn)樣式清新圖片輪播特效
- 輕松實現(xiàn)javascript圖片輪播特效
- 圖解js圖片輪播效果
- 最簡單的JavaScript圖片輪播代碼(兩種方法)
- 詳解js圖片輪播效果實現(xiàn)原理
- js圖片輪播效果實現(xiàn)代碼
- js圖片輪播手動切換效果
- js帶點自動圖片輪播幻燈片特效代碼分享
- JS仿hao123導航頁面圖片輪播效果
相關(guān)文章
JavaScript實現(xiàn)聯(lián)動菜單特效
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)聯(lián)動菜單特效,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-01-01JavaScript實現(xiàn)LI列表數(shù)據(jù)綁定的方法
這篇文章主要介紹了JavaScript實現(xiàn)LI列表數(shù)據(jù)綁定的方法,可實現(xiàn)綁定Li列表項對應數(shù)值項的功能,涉及javascript鼠標onmousemove、onmouseout及onclick等事件的相關(guān)使用技巧,需要的朋友可以參考下2015-08-08如何使用JavaScript實現(xiàn)無縫滾動自動播放輪播圖效果
這篇文章主要介紹了如何使用JavaScript實現(xiàn)“無縫滾動 自動播放”輪播圖效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-08-08