轮播图（一） PC端 轮播图(JS定时器)

思路：

1.鼠标经过轮播图模块，左右按钮显示，离开隐藏左右按钮。

​ 2.点击右侧按钮一次，图片往左播放一张，以此类推，左侧按钮同理。

​ 3.图片播放的同时，下面小圆圈模块跟随一起变化。

​ 4.点击小圆圈，可以播放相应图片。

​ 5.鼠标不经过轮播图，轮播图也会自动播放图片。

​ 6.鼠标经过，轮播图模块， 自动播放停止。

html 代码：

<div class="focus fl">
    <!-- 左侧按钮 -->
    <a href="javascript:;" class="arrow-l">
        &lt;
    </a>
    <!-- 右侧按钮 -->
    <a href="javascript:;" class="arrow-r"> &gt; </a>
    <!-- 核心的滚动区域 -->
    <ul>
        <li>
            <a href="#"><img src="upload/focus.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="upload/focus1.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="upload/focus2.jpg" alt=""></a>
        </li>
        <li>
            <a href="#"><img src="upload/focus3.jpg" alt=""></a>
        </li>
        <!-- <li>
            <a href="#"><img src="upload/focus.jpg" alt=""></a>
        </li> -->
    </ul>
    <!-- 小圆圈 -->
    <ol class="circle">

    </ol>
</div>

CSS代码

* {
            padding: 0;
            margin: 0;
        }
        
        a {
            text-decoration: none;
        }
        
        .focus {
            position: relative;
            width: 721px;
            height: 455px;
            background-color: purple;
            overflow: hidden;
        }
        
        .focus ul {
            position: absolute;
            top: 0;
            left: 0;
            width: 600%;
        }
        
        .focus ul li {
            list-style: none;
            float: left;
        }
        
        .arrow-l,
        .arrow-r {
            display: none;
            position: absolute;
            top: 50%;
            margin-top: -20px;
            width: 24px;
            height: 40px;
            background: rgba(0, 0, 0, .3);
            text-align: center;
            line-height: 40px;
            color: #fff;
            font-size: 18px;
            z-index: 2;
        }
        
        .arrow-l:hover,
        .arrow-r:hover {
            color: coral;
        }
        
        .arrow-r {
            right: 0;
        }
        
        ol {
            list-style: none;
        }
        
        .circle {
            position: absolute;
            bottom: 10px;
            left: 50px;
        }
        
        .circle li {
            float: left;
            width: 8px;
            height: 8px;
            /* background-color: #fff; */
            border: 2px solid rgba(255, 255, 255, 0.5);
            margin: 0 3px;
            border-radius: 50%;
            /*鼠标经过显示小手*/
            cursor: pointer;
        }
        
        .current {
            background-color: #fff;
        }

JS 代码：

window.addEventListener('load', function() {
    var focus = document.querySelector('.focus');
    var pre = document.querySelector('.arrow-l');
    var next = document.querySelector('.arrow-r');
    var ol = document.querySelector('ol');
    var ul = document.querySelector('ul');
    var focusX = focus.offsetWidth;
    // (1)- 鼠标移入焦点图，显示隐藏箭头
    focus.addEventListener('mouseenter', function() {
        pre.style.display = 'block';
        next.style.display = 'block';
    });
    focus.addEventListener('mouseleave', function() {
        pre.style.display = 'none';
        next.style.display = 'none';
    });

    // (2)- 显示轮播图圆点；有几张图片，就有几个圆点

    for (var i = 0; i < ul.children.length; i++) {
        // (3)- 创建元素,获得li
        var li = document.createElement('li');
        ol.appendChild(li);
        li.setAttribute('index', i);
        // (4)- 点击小圆点，出现样式（排他思想）
        ol.children[i].addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            // (5)- 点击圆点，出现新的图片（设置索引号）
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            // (6)- 做动画效果进行变换
            animate(ul, -index * focusX);
        });
    }
    ol.children[0].className = 'current';
    // (7)- 克隆第一张图片，以便点击最后一张图片时能够无缝衔接
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    // (8)- 点击右箭头，图片轮播
    var num = 0;
    var circle = 0;
    // 右击
    next.addEventListener('click', function() {
        // (9)- 声明一个变量获取对应的索引值
        // (10)- 判断，如果到了最后一张图片，那么立刻回到第一个图片的位置
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        animate(ul, -num * focusX);
        // 
        circle++;
        if (circle == ul.children.length - 1) {
            circle = 0;
        }
        // 排他思想
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    });
    // 左击
    pre.addEventListener('click', function() {
        // 声明一个变量获取对应的索引值
        // (11)- 如果到了最后一张，索引值等于0时，图片移动到最后一张图片，索引页瞬间变成最后一张图片
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -num * focusX + 'px';

        }
        num--;
        animate(ul, -num * focusX);
        // 图片向左移动，小圆点如果到了
        circle--;
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        // 排他思想
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    })
})