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

短命女 2022-09-10 13:20 139阅读 0赞

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

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);

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_20_color_FFFFFF_t_70_g_se_x_16][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/5ae6714fbd3e496498d6b018822a4146.png