<!-- 這個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’;
clearInterval(timer);
timer = null;
});
focus.addEventListener(‘mouseleave’,function(){
arrow-l.style.display = ‘none’；
arrow-r.style.display =‘none’;
timer = setInterval(function（）{ //timer前面不需要再添加var，因為頁面刷新的時候已經存在了定時器，定時器已打開，所以不需要var了
//手動調用事件
arrow_r.click();
}，3000)；
});
//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’;
}
//8 自動播放功能
var timer = setInterval(function（）{
//手動調用事件
arrow_r.click();
}，3000)；
})