JavaScript实现轮播图，项目解析（1）

亦凉 2022-09-10 06:14 108阅读 0赞

项目分析：

轮播图是学习web必做的一个项目，我将使用css+html+js自己写一个轮播图

参考京东首页的轮播图得到以下几个功能

1.  鼠标经过轮播图模块，左右按钮背景 opacity值从透明到.7透明，离开时变透明
2.  点击右侧按钮一次，图片往左播放一张，右键也是如此
3.  图片播放时，下面的小圆圈随着一齐变化
4.  点击小圆圈，可以播放相应的图片
5.  鼠标经过轮播图时，轮播时停止播放
6.  鼠标移开时自动播放

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_17_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][]

基本的结构如上，图片放在li列表中，给他设置宽长比较长大盒子。在js中使用setintaval实现图片向左滚动实现轮播效果。可以通过设置盒子的overflow属性实现对溢出部分图片的处理

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

在项目部署后期，项目需要进行维护时，添加新的轮播图后图的数量和底部小圆的数量相同，实现自动化控制小圆数量。

//获取图片的数量
    var img_num = document.querySelector('.img_room').querySelectorAll('li');
    //找到li的位置
    var buttom_item_ul = document.querySelector('.buttom_item').querySelector('ul');
    for (var i = 0; i < img_num.length; i++) {
        var li = document.createElement('li');
        buttom_item_ul.appendChild(li);
        //使下面圆的宽度改变
        buttom_item.style.width = img_num.length * 12 + 'px';
    }

鼠标经过轮播图区域时，左右按钮背景色出现。鼠标离开时，左右按钮背景色消失

//鼠标经过轮播图模块，左右按钮背景 opacity值从透明到.7透明，离开时变透明
            lunbo.addEventListener('mouseover', function() {
                but_left.style.backgroundColor = '#727272';
                but_right.style.backgroundColor = '#727272';
            });
            lunbo.addEventListener('mouseleave', function() {
                but_left.style.backgroundColor = '';
                but_right.style.backgroundColor = '';
            });

最终结果是这样的。

![20210906153132379.gif][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_17_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/cc1888eccdc04ce7a8cc40ee80ba72a6.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/daff7b93346a4043a82cc1b191b67006.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAcXFfNDE3NTQ2ODQ_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220829/968ffeeba9b34cfebc6d32ff1dfbc52a.png
[20210906153132379.gif]: /images/20220829/b7b32e512ae54cb0a4bb4b3d3cea1b76.png