js實現無縫連接輪播圖（四）點擊小圓點，移動圖片

<!-- 這個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">
&lt;
</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’);  //聲明一個變量，存儲點擊獲得的自定義的屬性

　　animate(ul, -index*focusWidth); //調用動畫函數，傳入實參ul，移動的距離是小圓點的索引*圖片的寬度（必須是負值）;

　　})

}

　　ol.children[0] = ‘current’;

 

})