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