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’);  //声明一个变量，存储点击获得的自定义的属性

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

　　}

})