一:css 樣式注意點(diǎn):left_span 和right_span與圖片下面的span 公用一個(gè)parent
二:js部分:
- 遍歷圖片的張數(shù) ,在這里動(dòng)態(tài)創(chuàng)建footer_span inserBefore插入到第二個(gè)span中.同時(shí)給它們綁定類名,拿出oSpan.innerHTML 為下面的span的索引做準(zhǔn)備的提供;
2:設(shè)置出了第一張圖片以外,其他的圖片從新遍歷 統(tǒng)一放在右邊, left=parent.offsetWidth;
3:遍歷所有的 footer_box.children.(遍歷所有的span包括 left_span,right_span)
3.1 :通過類名 可以先判斷點(diǎn)擊的是right_span 與 left_span
3.1.1:點(diǎn)擊left_span 圖片向右走 count-- .這里就是有三步 1:讓當(dāng)前的圖片立即向右走 一個(gè)parent.offsetWidth; 2.讓上一個(gè)來到左邊-parent.offsetWidth;位置,等待動(dòng)畫觸發(fā).3:讓當(dāng)前對(duì)應(yīng)的索引的圖片 動(dòng)畫顯示 left:0;
4 :else :如果點(diǎn)擊的都不是上面的兩個(gè) ,那么就是點(diǎn)擊了這里 : 這里就拿上面原來創(chuàng)建span的索引 來 跟 (當(dāng)前顯示的索引)isNow 索引做對(duì)比 來判斷是點(diǎn)擊了相對(duì)于當(dāng)前索引的左邊還是右邊;
5:footer_span的排他思想就單獨(dú)另外用一個(gè)函數(shù),這樣方便我們調(diào)用(因?yàn)樗腥齻€(gè)地方的調(diào)用) 具體哪個(gè)調(diào)用的看代碼吧, 在這里主要讓你們注意的就是怎么用排他的遍歷
在這里我們遍歷就 先排除 left_span 與 right_span 列子: for (var i =1; i < footer_box.children.length - 1; i++) ;然后讓當(dāng)前點(diǎn)擊的綁定類名 .但是這里就注意 了 isNow + 1; 因?yàn)槲覀儽闅v的時(shí)候是從1 開始遍歷故加1,footer_box.children[isNow+1].
className = 'current cur'; 然后設(shè)置全部的為另外一個(gè)類 footer_box.children[i].className = 'current ';
6:設(shè)置無限向左滾動(dòng) ,用到定時(shí)器
7:onmouseover 的時(shí)候清除定時(shí)器 這樣就停止動(dòng)畫 clearInterval(timer);
8:onmouseout 的時(shí)候 開啟定時(shí)器 timer=setInterval(autoPlay,1000);
代碼如下:
<script src="js/MyFunc.js"></script>
<script>
function $(symId) {
return document.getElementById(symId);
}
window.onload = function () {
//找對(duì)象
var box = $('box');
var top_main = $('top_main');
var picS = top_main.children;
// var footer_box = box.children[1];
var footer_box = $('footer');
// var iSpan = footer_box.children;
var isNow = 0;//用來判斷跳轉(zhuǎn)的頁數(shù)
//遍歷圖片
for (var i = 0; i < picS.length; i++) {
//有多少張圖片就創(chuàng)建多少個(gè)span
// var pic = picS[i];
// pic = i;
//創(chuàng)建span
var oSpan = document.createElement('span');
// 添加類
oSpan.className = 'current';
//footer_box.appendChild(oSpan);
//把創(chuàng)建出來的span 添加到第二個(gè)
footer_box.insertBefore(oSpan, footer_box.children[1]);
//查看ospan 的索引 值 發(fā)現(xiàn)它是由大到小的. 那么我們就只能拿pics[i].lenght -i
// oSpan.innerHTML= i;
//在這里拿到span的索引
oSpan.innerHTML = picS.length - i;
}
//單獨(dú)給 最下面的 第一個(gè)span (相對(duì)來說是第二個(gè) 同行來說是第一個(gè))添加類
footer_box.children[1].className = 'current cur';//這行要寫在外面不能寫在上面的大括號(hào)里面
//除了第一張 其他的都給它從新排列
var box_w = box.offsetWidth;
for (var i = 1; i < picS.length; i++) {
picS[i].style.left = box_w + 'px';
}
//判斷點(diǎn)擊了哪里? 點(diǎn)擊了以后讓圖片滾動(dòng) 那么多個(gè)span的地方可以點(diǎn)擊 那么只能遍歷 判斷了
for (var i = 0; i < footer_box.children.length; i++) { //這里遍歷的是 全部的span (包括左右兩個(gè)小 箭頭)
// mySpan[i].index = i;
//拿出單個(gè)span
var mySpan = footer_box.children[i];
mySpan.onmousedown = function () {
//alert(0);
if (this.className == 'lf') {//點(diǎn)擊了左邊 圖片向右滾動(dòng)
//讓當(dāng)前的頁快速的向右移動(dòng)
buffer(picS[isNow], {left: box_w});
isNow--;
// console.log(isNow);
//判斷不給它小于0
if (isNow < 0) {
isNow = picS.length - 1;//這里的索引的長 是拿圖片的總張數(shù)來判斷.
}
//讓上一張快速的來到左邊 等待
picS[isNow].style.left = -box_w + 'px';
//讓上一張圖片快速的顯示在這里
buffer(picS[isNow], {left: 0})
} else if (this.className == 'rg') {//點(diǎn)擊了右邊
//讓當(dāng)前的頁快速的向左移動(dòng)
buffer(picS[isNow], {left: -box_w});
isNow++;
if (isNow > picS.length - 1) {//如果當(dāng)前的跳轉(zhuǎn)到第5張圖片 (用圖片的索引來判斷
isNow = 0; //給它直接跳到第0 張
}
//讓下一張快速的來到右邊等待
picS[isNow].style.left = box_w + 'px';
//讓對(duì)應(yīng)索引的這一張動(dòng)畫向左移動(dòng) 顯示 那么此時(shí) left為0
buffer(picS[isNow], {left: 0})
} else {//點(diǎn)擊了腳下中間的某個(gè)span 那么 這里點(diǎn)擊的群體個(gè)數(shù)就更多了 需要遍歷
//但是想想上面都遍歷了一次大范圍的了 這次遍歷就將遍歷縮小范圍吧
// 就是從第2個(gè)span 開始 到小于總數(shù)的1
// for (var i = 1; i < footer_box.children.length-1; i++) {
//在這里就拿到 橫軸的 所有 span
// footer_box.children[i].className = 'current ';//讓所有的為原來的
// this.className = 'current cur';//讓當(dāng)前的單獨(dú)卻換
// 但是這里兩步就實(shí)現(xiàn)了 索引的卻換而已 . 想了想 這里排他實(shí)現(xiàn)不應(yīng)該放這里.
// 我們應(yīng)該把他另外放,然后好調(diào)用
// 在這里我們應(yīng)該是實(shí)現(xiàn) 點(diǎn)擊哪個(gè)span 給它對(duì)應(yīng)的圖片的索引動(dòng)畫顯示
//但是我們要想知道我們點(diǎn)擊的是當(dāng)前的span的左邊還是右邊的話,
// 我們必須另外保存一個(gè)變量 用來記錄點(diǎn)擊的是哪個(gè)
// // var mSpan = footer_box.children.length-1.[i];
// // mSpan.onmousedown = function () {
// alert(0);
// var indexNew = 0;//用來判斷將要點(diǎn)擊的新的span
var indexNew = this.innerHTML - 1;//因?yàn)樯厦嫖覀儷@取到的span 的索引值從 1 開始 .而現(xiàn)在我們要的索引從0 開始
if (indexNew > isNow) { //點(diǎn)擊 了右邊
//alert('點(diǎn)擊了右邊');
buffer(picS[isNow], {left: -box_w});
isNow = indexNew;
//讓下一張快速的來到右邊等待
picS[indexNew].style.left = box_w + 'px';
//讓對(duì)應(yīng)索引的這一張動(dòng)畫向左移動(dòng) 顯示 那么此時(shí) left為0
buffer(picS[isNow], {left: 0})
} else if (indexNew < isNow) {//點(diǎn)擊了左邊
// alert('點(diǎn)擊了左邊');
//讓當(dāng)前的頁快速的向右移動(dòng)
buffer(picS[isNow], {left: box_w});
isNow = indexNew;
//讓上一張快速的來到左邊 等待
picS[isNow].style.left = -box_w + 'px';
//讓上一張圖片快速的顯示在這里
buffer(picS[isNow], {left: 0})
}
}
//當(dāng)span點(diǎn)擊一觸發(fā)就進(jìn)行 當(dāng)然這里也是設(shè)置了排除大小于號(hào)的span的觸發(fā)
update();//調(diào)用索引卻換
}
}
//更新索引
function update() {
for (var i =1; i < footer_box.children.length - 1; i++) {
//在這里就拿到 橫軸的 所有 span
footer_box.children[i].className = 'current ';//讓所有的為原來的 / 注意不能 - 1
//this.className = 'current cur';//讓當(dāng)前的單獨(dú)卻換 但是這個(gè)方式 不能實(shí)現(xiàn)
footer_box.children[isNow+1].className = 'current cur';//讓當(dāng)前的單獨(dú)卻換 , 不能不 + 1
// 這里的位置可以寫在當(dāng)前遍歷的外面
console.log(footer_box.children[isNow+1]);
}
// for (var i = 0; i < oSpan.innerHTML.length; i++) {//這里是不能直接遍歷 oSpan.innerHTML
// oSpan.innerHTML[i].className = 'current';
// this.className = 'current cur';
// }
}
//設(shè)置無限輪播 給它無限的向左滾動(dòng)
var timer = null;
timer = setInterval(autoPlay,1000);
function autoPlay() {
console.log('-------------');
buffer(picS[isNow], {left: -box_w});
isNow++;
if (isNow>picS.length-1) {
isNow = 0;
}
//讓下一張快速的來到右邊等待
picS[isNow].style.left = box_w + 'px';
//讓對(duì)應(yīng)索引的這一張動(dòng)畫向左移動(dòng) 顯示 那么此時(shí) left為0
buffer(picS[isNow], {left: 0});
//讓下面的span 條 也跟著跳轉(zhuǎn)
update();//調(diào)用索引卻換
}
//當(dāng) 鼠over 與out 時(shí)發(fā)生的事件
box.onmouseover = function () {
// alert(0);
clearInterval(timer);
// console.log(clearInterval(timer));
};
box.onmouseout = function () {
// alert('lIK')
timer=setInterval(autoPlay,1000);
};
}
</script>
