JS+HTML+CSS3轮播图

1.重难点：

1. 布局

2. 图片与小圆点同步问题

3. setInterval定时器的使用

4. 淡入淡出效果

5. 左右箭头点击时，图片与小圆点的效果同步

2.思路：

1. 最底下容器使用相对定位，图片、小圆点、箭头均使用绝对定位悬浮在底部容器上。图片的top和left均设置为0，即全部重叠在一个位置。但是只显示一张图片，即只有一张图片的display为block，其它图片隐藏，即display:none；

2. 通过全局index索引记录点击的是第几个小圆点，默认为0，找到相对应的第index张图片，将这张图片显示，其他图片隐藏；

3. 通过修改index使得图片和右下角小圆点同步；

4. 通过js修改元素animation值，否则动画只会在初始化时显示一次；

5. 点击左箭头是index- -，若index<0,则赋值为4；点击右箭头是index++，若index>0,则赋值为0，达到循环的效果；

6. 设置最底部容器为固定大小，图片使用列表一行展示，列表的容器使用相对定位并设置为溢出隐藏(overflow:hidden),列表使用绝对定位，将列表的位置向左移或右移实现轮的效果。

3.代码：

CSS：
        body {
            margin: 0;
        }

        .banner {
            width: 1000px;
            height: 550px;
            /* 面板使用相对定位，方便在其上面使用绝对定位添加元素 */
            position: relative;
        }

        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        .banner ul li img {
            width: 1000px;
            height: 550px;
        }

        .banner .item {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
            opacity: 0;
        }

        .banner .item:first-child {
            display: block;
            opacity: 1;
        }

        /* 右下角小圆点切换 */
        .zeroPoint {
            position: absolute;
            bottom: 20px;
            right: 40px;
        }

        .zeroPoint li {
            width: 8px;
            height: 8px;
            border: 2px solid #555;
            border-radius: 50%;
            background: #555;
            display: inline-block;
            margin-right: 5px;
        }

        .zeroPoint li:hover {
            background: #fff;
            cursor: pointer;
        }

        .zeroPoint li.hover {
            background: #fff;
        }

        .arrow .leftArrow,
        .arrow .rightArrow {
            width: 200px;
            height: 200px;
            position: absolute;
            top: 200px;
            color: #fff;
            cursor: pointer;
            background-repeat: no-repeat;
        }

        .arrow .leftArrow {
            left: 100px;
            background: url('./img/left.png');
        }

        .arrow .rightArrow {
            right: 100px;
            background: url('./img/rigth.png');
        }

        /*定义图片切换动画样式*/
        /*淡出*/
        @keyframes fadeOut {
            from {
                opacity: 1;
            }

            to {
                opacity: 0;
            }
        }

        /*淡入*/
        @keyframes fadeIn {
            from {
                opacity: 0;
            }

            to {
                opacity: 1;
            }
        }

   HTML：
     <!-- 整个容器 -->
    <div class="banner">
        <!-- 图片容器 -->
        <div class="img-wrap">
            <ul>
                <li class="item"><img src="./img/1.jpg" /></li>
                <li class="item"><img src="./img/2.jpg" /></li>
                <li class="item"><img src="./img/3.jpg" /></li>
                <li class="item"><img src="./img/4.jpg" /></li>
                <li class="item"><img src="./img/5.jpg" /></li>
            </ul>
        </div>
        <!-- 右下角小圆点 -->
        <ul class="zeroPoint">
            <li class="hover"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <!-- 左右箭头容器 -->
        <div class="arrow">
            <div class="leftArrow"></div>
            <div class="rightArrow"></div>
        </div>
    </div>

   JS：
 
    // 全局的index,图片和小圆点进行同步的关键
    var index = 0;
    // 获取所有图片
    var imgLis = document.querySelectorAll('.img-wrap li');
    // 获取小圆点的父元素ul
    var zeroPoint = document.querySelector('.zeroPoint');
    // 获取所有的小圆点
    let lis = zeroPoint.querySelectorAll('li');

    function setPicture() {
        var len = imgLis.length;
        // 遍历所有图片
        for (let i = 0; i < len; i++) {
            if (i == index) { //如果这个图片是第index个孩子，则让它显示，并设置淡入的动画效果
                imgLis[i].style.display = 'block';
                imgLis[i].style.animation = 'fadeIn 3s';
            } else { //否则,隐藏，并设置淡出动画
                imgLis[i].style.animation = 'fadeOut 0s';
                imgLis[i].style.display = 'none';

            }
        }
    }

    function setZero() {
        for (let [n, li] of lis.entries()) {
            if (n == index) {  //如果是第index个小圆点，则修改这个小圆点的背景颜色为白色
                li.className = 'hover'
            } else {  //其他小圆点恢复默认样式
                li.className = li.className.replace('hover', '')
            }
        }
    }

    // 小圆点点击监听事件
    zeroPoint.addEventListener('click', function (event) {
        let trarget = event.target;
        console.log(trarget);
        for (let [n, li] of lis.entries()) { //更改被点击的小圆点样式，背景色为白色，这里通过添加hover类的方式实现
            if (li == target) {
                index = n;
                trarget.className = 'hover';
            } else {  //否则恢复为小圆点的默认样式，这里通过去除hover类的方式来实现
                li.className = li.className.replace('hover', '');
            }
        }
        setPicture(); //设置图片
    })

    // 定时器，达到自动轮播的效果
    setInterval(function () {
        index++;
        if (index > 4) {
            index = 0;
        }
        setPicture();
        setZero();
    }, 3000)

    // 左箭头点击事件
    var leftArrow = document.querySelector('.leftArrow')
    leftArrow.addEventListener('click', function (event) {
        index--;
        if (index < 0) {
            index = 4;
        }
        
        setPicture();
        setZero();
    })
    // 右箭头点击事件
    var rightArrow = document.querySelector('.rightArrow')
    rightArrow.addEventListener('click', function (event) {
        index++;
        if (index > 4) {
            index = 0;
        }
        setPicture();
        setZero();
    })