PC端-横向轮播图

步骤：

• 第一步：先实现右侧按钮点击图片动起来；

1. 每次点击图片走的距离；
2. 起始位置已知，计算定时器每走一小步的距离；

• 第二步：判断点击按钮一次图片移动的距离，停止定时器；
• 第三步：左边按钮逻辑和右侧按钮几乎一致；

1. 因此封装函数move(flag),函数传参是Boolean则是左右按钮方向

• 第四步：无缝轮播：html结构修改，在当前结构分别加第一张图和最后一张图；

1. 判断图片位置，设置相应位置；

• 第五步：小圆点逻辑：排他思想；

1. 关键在于小圆点变色，用最终位置计算小圆点下标，设置样式；

• 第六步：点击小圆点，图片切换和小圆点位置对应，move函数中传参数根据类型判断，boolean 是左右按钮，数值室小圆点下标相关；flag参数代表左右按钮和小圆点；
• 第七步：自动轮播：根据图片下标进行；
• 第八步：自动轮播和鼠标行为同步时：鼠标移入清楚自动轮播；鼠标移出自动轮播
• 第九步：鼠标移入后，点击按钮和小圆点有需要把自动轮播的小标值更新，否则没法同步；

html代码：

<div id="swiper">
        <ul class="list">
            <li><img src="img/9.jpg" alt=""></li>
            <!-- 最后一张 -->
            <li><img src="img/2.jpg" alt=""></li>
            <li><img src="img/3.jpg" alt=""></li>
            <li><img src="img/4.jpg" alt=""></li>
            <li><img src="img/6.jpg" alt=""></li>
            <li><img src="img/9.jpg" alt=""></li>
            <!-- 第一张 -->
            <li><img src="img/2.jpg" alt=""></li>
        </ul>
        <span class="btn-left">&lt;</span>
        <span class="btn-right">&gt;</span>
        <ul class="points">
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>

css代码：

    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            display: block;
        }
        
        input {
            outline: none;
        }
        
        .clearFix:after {
            content: '';
            display: block;
            clear: both;
        }
        /*禁止系统滚动条*/
        
        html,
        body {
            height: 100%;
            overflow: hidden;
        }
        
        #swiper {
            position: relative;
            width: 1000px;
            height: 500px;
            background: green;
            margin: 50px auto 0;
            overflow: hidden;
        }
        
        #swiper .list {
            position: absolute;
            left: -1000px;
            top: 0;
            width: 7000px;
            overflow: hidden;
        }
        
        #swiper .list>li {
            float: left;
            width: 1000px;
            height: 500px;
        }
        
        #swiper .list>li img {
            width: 100%;
            height: 100%;
        }
        
        #swiper span {
            position: absolute;
            /* left: 0; */
            top: 40%;
            transform: translateY(-50%);
            width: 80px;
            height: 100px;
            background: rgba(0, 0, 0, 0.5);
            font-size: 50px;
            color: white;
            font-weight: bold;
            padding-top: 30px;
            text-align: center;
            opacity: 0;
            transition: opacity 1s;
            cursor: pointer;
        }
        
        #swiper:hover span {
            opacity: 1;
        }
        
        #swiper .btn-left {
            left: 0;
        }
        
        #swiper .btn-right {
            right: 0;
        }
        
        #swiper .points {
            position: absolute;
            left: 40%;
            transform: translateX(-50%);
            bottom: 20px;
            /* width: 300px; */
        }
        
        #swiper .points>li {
            width: 30px;
            height: 30px;
            background: rgba(0, 0, 0, 0.5);
            border-radius: 50%;
            float: left;
            margin: 0 5px;
        }
        
        #swiper .points .current {
            background: red;
        }
    </style>

javascript代码：

<script>
        window.onload = function() {
            // 获取变量
            var swiper = document.querySelector('#swiper');
            var list = document.querySelector('#swiper .list');
            var liNodes = document.querySelectorAll('#swiper .list>li');
            var btnNodes = document.querySelectorAll('#swiper span');
            // 切换一张需要的总时长
            var timeAll = 1000;
            // 每走一步需要的时长
            var timeStep = 20;
            var timer = null;
            // 小圆点
            var icons = document.querySelectorAll('#swiper>.points li');
            var isMove = false;
            var autoTimer = null;

            // 鼠标进入banner
            swiper.onmouseenter = function() {
                // 清除定时器
                clearInterval(autoTimer);
            }

            // 鼠标离开banner
            swiper.onmouseleave = function() {
                // 打开自动轮播定时器
                autoRun();
            }

            // 点击按钮切换图片
            // 右按钮
            btnNodes[1].onclick = function() {
                // 图片且切换函数
                move(true);
            }

            // 左按钮
            btnNodes[0].onclick = function() {
                // 图片切换函数
                move(false);
            }

            // 图片切换函数
            function move(flag) {
                // 保证定时器只开一个，不会堆砌
                if (isMove) {
                    return;
                }
                isMove = true;


                // 区分flag参数，boolean是左右图片切换
                if (typeof flag == 'boolean') {
                    if (flag) {
                        var elementDistance = -1000;
                    } else {
                        var elementDistance = 1000;
                    }
                } else {
                    var elementDistance = flag - list.offsetLeft;
                }

                // 每次点击后，ul所走的距离
                var elementLast = list.offsetLeft + elementDistance;
                // 每走一小步的距离
                var step = elementDistance / (timeAll / timeStep);

                timer = setInterval(function() {
                    var left = list.offsetLeft + step;
                    if (left == elementLast) {
                        // 走的的距离等于最终的位置
                        clearInterval(timer);
                        if (left == -6000) {
                            left = -1000;
                        } else if (left == 0) {
                            left = -5000;
                        }
                        isMove = false;
                    }
                    // 设置样式
                    list.style.left = left + 'px';
                }, timeStep);

                // 小圆点切换逻辑
                for (var i = 0; i < icons.length; i++) {
                    icons[i].className = '';
                }

                // 小圆点切换
                var index = elementLast / -1000 - 1;
                if (index > 4) {
                    index = 0;
                } else if (index < 0) {
                    index = 4;
                }
                icons[index].className = 'current';
                console.log(icons);
                //让自动轮播和点击后下标保持统一
                autoIndex = index + 1;
            }

            // 点击小圆点逻辑
            for (var i = 0; i < icons.length; i++) {
                icons[i].index = i;
                icons[i].onclick = function() {
                    // 拿小圆点下标，求显示图片的下标，再求显示图片位置
                    move((this.index + 1) * -1000);
                }
            }

            // 自动轮播逻辑
            var autoIndex = 1;
            autoRun();

            function autoRun() {
                autoTimer = setInterval(function() {
                    autoIndex++;
                    move(autoIndex * -1000);
                    if (autoIndex == 6) {
                        autoIndex = 1;
                    }
                }, 2000);
            }
        }
    </script>