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

项目分析：

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

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

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

 首先先搭一个简单的静态界面，为轮播图布局。

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

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

//获取图片的数量
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 = '';
        });

最终结果是这样的。