js实现无缝连接轮播图（四）点击小圆点，移动图片

<!– 这个animate.js 必须写到 index.js的上面引入 –>
<script src=”js/animate.js”></script>
<!– 引入我们首页的js文件 –>
<script src=”js/index.js”></script>

HTML代码

——————————————————

</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’;

})

js实现无缝连接轮播图（四）点击小圆点，移动图片的更多相关文章