欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間:2016年02月17日 09:29:38   作者:吳統(tǒng)威  
這篇文章主要介紹了Javascript實(shí)現(xiàn)圖片輪播效果(二)圖片序列節(jié)點(diǎn)的控制實(shí)現(xiàn)的相關(guā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ì)大家有所幫助。

相關(guān)文章

最新評(píng)論