JavaScript实现轮播图，项目解析（2）附源码

上次我们把轮播图把轮播图的静态界面和部分功能做出来了，今天我们要实现轮播图一下四个功能。

1. 图片播放时，下面的小圆圈随着一齐变化
2. 点击小圆圈，可以播放相应的图片
3. 鼠标经过轮播图时，轮播时停止播放
4. 鼠标移开时自动播放

第一个目标，点击按钮图片播放时，下面的小圆圈随着一齐变化 。这里可以分为这两个动作

1.点击按钮切换图片

在点击鼠标切换的时候，就是把img_room的left属性进行规律变化，即左右加减值。再调用封装好的缓动动画函数。

//实现左右切换图片
        but_left.addEventListener('click', function() {
            if (num == 0) {
                num = img_num.length - 1;
                img_room.style.left = -num * img_width + 'px';
            };
            num--;
            animate(img_room, -img_width * num, );
            xiaoyuan(num);
        });

        but_right.addEventListener('click', function() {
            //点击右箭头如果num等于img的数量-1时
            if (num == img_num.length - 1) {
                img_room.style.left = 0 + 'px';
                num = 0;
            }
            num++;
            animate(img_room, -img_width * num, );
            xiaoyuan(num);
        });

2.图片切换的同时，底部的小圆也跟着变动

封装一个小圆点切换的函数。运用的思想是排他思想

//一个修改小圆圈背景颜色
function xiaoyuan(count) {
     img_num = document.querySelector('.img_room').querySelectorAll('li');
     console.log(img_num.length);
     //清除所有的小圆圈的背景颜色
     for (var i = 0; i <= img_num.length - 2; i++) {
         buttom_item_ul.children[i].className = 'li_current_none';
     };
     //判断图片到哪个位置
     if (count >= 1 && count <= img_num.length - 2) {
         buttom_item_ul.children[num].className = 'li_current';
     } else if (count === 0 || count === img_num.length - 1) {
         buttom_item_ul.children[0].className = 'li_current';
     };
}

鼠标经过轮播图时，轮播时停止播放

// 2. 鼠标经过focus 就显示隐藏左右按钮
lunbo.addEventListener('mouseenter', function() {
        but_right.style.display = 'block';
        but_left.style.display = 'block';
        clearInterval(timer);
});
lunbo.addEventListener('mouseleave', function() {
        but_right.style.display = 'none';
        but_left.style.display = 'none';
        //周期循环播放图片
        timer = setInterval(function() {
            but_right.click();
        }, 2000);
});

另外自动播放

        //周期循环播放图片
        var timer = setInterval(function() {
            but_right.click();
        }, 2000);