Javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)
推薦閱讀:Jquery代碼實(shí)現(xiàn)圖片輪播效果(一)
在上篇文章給大家介紹了Javascript實(shí)現(xiàn)圖片輪播效果(一)讓圖片跳動(dòng)起來(lái),這里我們實(shí)現(xiàn)圖片序列節(jié)點(diǎn)的跳轉(zhuǎn)實(shí)現(xiàn).在圖片跳轉(zhuǎn)的同時(shí),我們一般需要知道他跳轉(zhuǎn)的是哪個(gè)位置,這里就是圖片序列節(jié)點(diǎn)需要跟圖片一同顯示.下面我們就直接作分析.
在沒(méi)講正文之前先給大家展示效果圖:
在HTML,CSS代碼結(jié)構(gòu)中我們需要加入一個(gè)圖片序列是否選中的樣式
#slider ol li a.active{ background-color: #ffffff; color: #ff0000; }
JS代碼中我們需要對(duì)上一篇文章的JS代碼做一些改變和增加,這里首先要改變的是將跳轉(zhuǎn)的代碼做一次封裝,封裝到一個(gè)方法中,然后返回setInterval的值.這個(gè)主要是為序列節(jié)點(diǎn)實(shí)現(xiàn)一些功能.
然后在跳轉(zhuǎn)代碼中,改變相應(yīng)的序列節(jié)點(diǎn)的樣式,為了能夠展示跳轉(zhuǎn)的位置.
//圖片節(jié)點(diǎn) var slider = document.getElementById("slider"); var imgul = slider.getElementsByTagName("ul")[0]; var imglis = imgul.getElementsByTagName("li"); var len = imglis.length; //圖片序列節(jié)點(diǎn) var numol = slider.getElementsByTagName("ol")[0]; var numlinks = numol.getElementsByTagName("a"); //共享序列 var index = 0; //圖片跳轉(zhuǎn),圖片跳轉(zhuǎn)的同時(shí),改變序列節(jié)點(diǎn)的跳轉(zhuǎn) var jump = function () { return setInterval(function(){ if(index >= len){ index = 0; } //圖片跳轉(zhuǎn) imgul.style.left = - (800 * index) + "px"; //改變序列節(jié)點(diǎn)樣式:首先要清除所有的鏈接的樣式,然后在激活對(duì)應(yīng)的序列節(jié)點(diǎn)樣式 for (var i = 0; i < len; i++) { numlinks[i].setAttribute("class",""); } numlinks[index].setAttribute("class","active"); index++; },2000); }; var jumpindex = jump();
這里還需要加入序列節(jié)點(diǎn)的hover狀態(tài)下的控制.
hover后圖片跳轉(zhuǎn)應(yīng)該停止,應(yīng)停留在hover下的圖片展示這里序列節(jié)點(diǎn)的數(shù)目與圖片的數(shù)目是相對(duì)應(yīng)的,因此可以通過(guò)當(dāng)前序列節(jié)點(diǎn)所在的位置來(lái)改變其他的狀態(tài).
當(dāng)鼠標(biāo)離開(kāi)序列節(jié)點(diǎn)后,應(yīng)當(dāng)讓圖片繼續(xù)自動(dòng)跳轉(zhuǎn).
//增加序列節(jié)點(diǎn)的hover控制: 1. hover后要禁止圖片的跳轉(zhuǎn),顯示在當(dāng)前的圖片上,這里就需要清除跳轉(zhuǎn) 2.hover離開(kāi)后,在當(dāng)前的圖片上做圖片的跳轉(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(); } }
這樣我們就完成了第二步的效果.到此本文的全部敘述也就給大家介紹完了,希望對(duì)大家有所幫助。
- 基于cssSlidy.js插件實(shí)現(xiàn)響應(yīng)式手機(jī)圖片輪播效果
- Bootstrap 最常用的JS插件系列總結(jié)(圖片輪播、標(biāo)簽切換等)
- 用JS實(shí)現(xiàn)圖片輪播效果代碼(一)
- 原生JS實(shí)現(xiàn)旋轉(zhuǎn)木馬式圖片輪播插件
- 基于javascript實(shí)現(xiàn)樣式清新圖片輪播特效
- 輕松實(shí)現(xiàn)javascript圖片輪播特效
- 圖解js圖片輪播效果
- 最簡(jiǎn)單的JavaScript圖片輪播代碼(兩種方法)
- 詳解js圖片輪播效果實(shí)現(xiàn)原理
- js圖片輪播效果實(shí)現(xiàn)代碼
- js圖片輪播手動(dòng)切換效果
- js帶點(diǎn)自動(dòng)圖片輪播幻燈片特效代碼分享
- JS仿hao123導(dǎo)航頁(yè)面圖片輪播效果
相關(guān)文章
JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)聯(lián)動(dòng)菜單特效,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-01-01JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)LI列表數(shù)據(jù)綁定的方法,可實(shí)現(xiàn)綁定Li列表項(xiàng)對(duì)應(yīng)數(shù)值項(xiàng)的功能,涉及javascript鼠標(biāo)onmousemove、onmouseout及onclick等事件的相關(guān)使用技巧,需要的朋友可以參考下2015-08-08js控制div及網(wǎng)頁(yè)相關(guān)屬性的代碼
js控制div及相關(guān)屬性,對(duì)于需要控制頁(yè)面內(nèi)的元素的朋友可以參考下。2009-12-12js求數(shù)組最大值的八種具體實(shí)現(xiàn)方法
數(shù)組如何求最大值,想必很多的朋友都不會(huì)吧,下面這篇文章主要給大家介紹了關(guān)于使用js求數(shù)組最大值的八種方法具體實(shí)現(xiàn)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下2023-09-09如何使用JavaScript實(shí)現(xiàn)無(wú)縫滾動(dòng)自動(dòng)播放輪播圖效果
這篇文章主要介紹了如何使用JavaScript實(shí)現(xiàn)“無(wú)縫滾動(dòng) 自動(dòng)播放”輪播圖效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-08-08js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果
本篇文章主要分享了js實(shí)現(xiàn)帶緩動(dòng)動(dòng)畫的導(dǎo)航欄效果的示例代碼。具有一定的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-01-01關(guān)于Blog頂部的滾動(dòng)導(dǎo)航條代碼
關(guān)于Blog頂部的滾動(dòng)導(dǎo)航條代碼...2006-09-09淺談移動(dòng)端之js touch事件 手勢(shì)滑動(dòng)事件
這篇文章主要和大家聊一聊移動(dòng)端之js touch事件,即手指的滑動(dòng)事件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11js模擬如何實(shí)現(xiàn)重載以及默認(rèn)參數(shù)
這篇文章主要介紹了js模擬如何實(shí)現(xiàn)重載以及默認(rèn)參數(shù),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05