javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)_javascript技巧

《javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)_javascript技巧》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫。

1、Javascript實(shí)現(xiàn)圖片輪播效果（二）圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)推薦閱讀：Jquery代碼實(shí)現(xiàn)圖片輪播效果（一）在上篇文章給大家介紹了Javascript實(shí)現(xiàn)圖片輪播效果（一）讓圖片跳動起來,這里我們實(shí)現(xiàn)圖片序列節(jié)點(diǎn)的跳轉(zhuǎn)實(shí)現(xiàn)?在圖片跳轉(zhuǎn)的同時(shí)，我們一般需要知道他跳轉(zhuǎn)的是哪個(gè)位置，這里就是圖片序列節(jié)點(diǎn)需要跟圖片一同顯示?下面我們就直接作分析.在沒講正文之前先給人家展示效果圖:在HTML,CSS代碼結(jié)構(gòu)中我們需要加入一個(gè)圖片序列是否選中的樣式#sliderollia.active{background-color:tt

2、ffffff;color:#ff0000;}JS代碼中我們需要對上一篇文章的JS代碼做一些改變和增加，這里首先要改變的是將跳轉(zhuǎn)的代碼做一次封裝，封裝到一個(gè)方法中，然后返冋setinterval的值.這個(gè)主要是為序列節(jié)點(diǎn)實(shí)現(xiàn)-些功能.然后在跳轉(zhuǎn)代碼中，改變相應(yīng)的序列節(jié)點(diǎn)的樣式,為了能夠展示跳轉(zhuǎn)的位置.//圖片節(jié)點(diǎn)varslider=document.getElementByld（^slider^）;varimgul二slider.getElementsByTagName（〃ul〃）[0];varimglis二imgul

3、.getElementsByTagName（，zli，z）;varlcn二imglis?length;//圖片序列節(jié)點(diǎn)varnumol=slider.getElementsByTagName(，zorz)[0];varnumlinks二numol.getElementsByTagMame；//共享序列varindex=0;〃圖片跳轉(zhuǎn)，圖片跳轉(zhuǎn)的同時(shí),改變序列節(jié)點(diǎn)的跳轉(zhuǎn)varjump=function(){returnsetinterval(function(){辻(index>二len){index二0;}〃圖片跳轉(zhuǎn)

4、imgul.style,left=-(800*index)+"px";〃改變序列節(jié)點(diǎn)樣式:首先要清除所有的鏈接的樣式，然后在激活對應(yīng)的序列節(jié)點(diǎn)樣式for(vari=0;i

5、hover下的圖片展示這里序列節(jié)點(diǎn)的數(shù)目與圖片的數(shù)目是相對應(yīng)的，因此可以通過當(dāng)前序列節(jié)點(diǎn)所在的位置來改變其他的狀態(tài).當(dāng)鼠標(biāo)離開序列節(jié)點(diǎn)后,應(yīng)當(dāng)讓圖片繼續(xù)自動跳轉(zhuǎn).//増加序列節(jié)點(diǎn)的hover控制：1.hover后要禁止圖片的跳轉(zhuǎn)，顯示在當(dāng)前的圖片上,這里就需要清除跳轉(zhuǎn)2.hover離開后，在當(dāng)前的圖片上做圖片的跳轉(zhuǎn)for(vari=0;i

6、en;i++){numlinks[i].setAttribute("class","〃)；if(numlinks[i]二二二this){index二i;}imgul.style,left=-(800*index)+"px";numlinks[index].setAttribute(〃class〃，"active");}//outnumlinks[i].onmouseout二function(){jumpindex二jump();這樣我們就完成了第二步的效果.到此木文的全部敘述也就給犬家介紹完了，希望對大家有所幫助。