js實現無縫連接輪播圖（七）實現左側按鈕的功能
- 2020 年 10 月 22 日
- 筆記
<!– 這個animate.js 必須寫到 index.js的上面引入 –>
<script src=”js/animate.js”></script>
<!– 引入我們首頁的js文件 –>
<script src=”js/index.js”></script>
HTML程式碼
——————————————————
<div class=”focus fl”>
<!– 左側按鈕 –>
<a href=”javascript:;” class=”arrow-l”>
<
</a>
<!– 右側按鈕 –>
<a href=”javascript:;” class=”arrow-r”> </a>
<!– 核心的滾動區域 –>
<ul>
<li>
<a href=”#”><img src=”upload/focus.jpg” alt=””></a>
</li>
<li>
<a href=”#”><img src=”upload/focus1.jpg” alt=””></a>
</li>
<li>
<a href=”#”><img src=”upload/focus2.jpg” alt=””></a>
</li>
<li>
<a href=”#”><img src=”upload/focus3.jpg” alt=””></a>
</li>
</ul>
<!– 小圓點 –>
<ol class=”circle”>
</ol>
</div>
————————————————
js程式碼
———————————————————————-
window.addEventListener(『load』,function(){
//1、獲取元素
var arrow-l = document.querySelector(『.arrow-l』);
var arrow-r = document.querySelector(『.arrow-r』);
var focus = document.querySelector(『.focus』);
var focuwidth = focus.offsetWidth;
focus.addEventListener(『mouseenter』,function(){
arrow-l.style.display = 『block』;
arrow-r.style.display = 『block』;
});
focus.addEventListener(『mouseleave』,function(){
arrow-l.style.display = 『none』；
arrow-r.style.display =『none』;
});
//2、動態生成小圓點
var ul = focus.querySelector(『ul』);
var ol = focus.querySelector(『ol』);
for(var i = 0;i<ul.children.length;i++){ //使用for循環，根據banner圖片的數量生成li小圓點的數量
var i = document.createElement(『li』);
li.setAttribute(『index』,i);
ol.appendChild(li);
//3.在小圓點生成的同時，用排他思想並且綁定點擊事件實現顏色填充的切換
li.addEventListener(『click』,function(){ //再點擊事件里使用for循環的排他思想
//清除掉所有li裡面的current
for(var i = 0;i<ol.children.length;i++){
ol.children[i].className = 『』；
}
this.className = 『current』;
var index = this.getAttribute(『index』); //聲明一個變數，存儲點擊獲得的自定義的屬性
//7.當我們點擊了小圓點的 li 就要把這個li的索引值給 箭頭的num,因為小圓點的li和箭頭num都是獨立的，只能單獨執行自己。
num= index; //num是全局變數
//當我們點擊了小圓點，再點擊箭頭，小圓點也要跟著移動到下一個小雨點，circle是控制小圓點的，所以也要把inde給circle
circle = index;
animate(ul, -index*focusWidth); //調用動畫函數，傳入實參ul，移動的距離是小圓點的索引*圖片的寬度（必須是負值）;
})
}
ol.children[0] = 『current』;
//5.cloneNode第一張圖片放到最後面
var first = ul.children[0].cloneNode(true); //因為cloneNode是寫在了生成小圓點的下面，所以小圓點不會多一個
ul.appendCHild(first);
//4.點擊右箭頭，圖片滾動一張
var num = 0;
var circle = 0; //全局變數 控制小圓點的播放
arrow_r.addEventListener(『click』,function(){
//如果走到最後一張圖片，left要快速復原 等於0
if(num==ul.children.length-1){
ul.style.left = 0;
num=0;
}
num++;
animate(ul,-num*focusWidth);
//6.點擊右側按鈕，小圓點一起變化，可以在聲明一個變數控制小圓點
circle++;
//先清除小圓點的類名current
//如果circle==4，說明我們走到了克隆的這張圖片了，因為圖片是5張，小圓點是4個 小圓點的第四個對應圖片的第五張
if（circle==ol.children.length）{
circle = 0;
}
circleChange();
});
//左側按鈕
arrow_l.addEventListener(『click』,function(){
//如果走到最後一張圖片，left要快速復原 等於0
if(num==ul.children.length-1){
//num=ul.children.length-1;
ul.style.left =-num*focusWidth+『px』;
}
num–;
animate(ul,-num*focusWidth);
//6.點擊右側按鈕，小圓點一起變化，可以在聲明一個變數控制小圓點
circle–;
//先清除小圓點的類名current
//如果circle<0，說明我們走到了第一張圖片了，小圓點要改為第四個小圓點
if（circle<0）{
circle = ol.children.length-1;
}
circleChange();
});
function circleChange(){
for（var i = 0;i<ol.child.length;i++）{
ol.children[i].className = 『』；
}
//留下當前的小圓點
ol.children[circle].className = 『current』;
}
})
