轮播图要点描述

进入页面 显示第一张图片，从右至左移动 显示对应的图片

点击左边按钮，图片切换为上一张的图，点击右边按钮，图片切换为下一张的图

调用动画来实现位置的改变

自动切换： 默认状态自动切换下一张

鼠标移入图片区域：自动切换停止

鼠标移出图片区域：开始自动切换

图片切换，下方小圆点的颜色对应跟着切换

二.html结构部分的实现

 <div class="box">
        <div class="imgList">
            <ul>
                <li><img src="img/0.jpg" alt=""></li>
                <li><img src="img/1.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>
            </ul>
        </div>
        <div class="btns">
            <div class="leftBtn"></div>
            <div class="rightBtn"></div>
        </div>
        <div class="circleList">
            <ol>
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>

三.css样式部分的实现

* {
            margin: 0;
            padding: 0;
        }
        ul,
        ol {
            list-style: none;
        }
        .box {
            width: 560px;
            height: 300px;
            border: 5px solid red;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        .imgList {
            /* 这个宽度很重要 */
            width: 6666px;
            height: 300px;
            background-color: tomato;
            position: absolute;
            top: 0;
            left: 0;
        }
        .imgList ul li {
            width: 560px;
            height: 300px;
            float: left;
        }
        .circleList {
            position: absolute;
            bottom: 10px;
            left: 50%;
            margin-left: -70px;
        }
        .circleList ol li {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background-color: #fff;
            float: left;
            border-radius: 50%;
        }
        .circleList ol li.active {
            background-color: tomato;
        }
        .btns div {
            width: 30px;
            height: 60px;
            background-color: tomato;
            position: absolute;
            top: 50%;
            margin-top: -30px;
        }
        .btns .rightBtn {
            right: 0;
        }

四.轮播图封装的动画run.js

// 获取非行间样式
function getStyle(ele, attr) {
    // if (window.getComputedStyle) {
    //     return getComputedStyle(ele)[attr];
    // } else {
    //     return ele.currentStyle[attr];
    // }
    return window.getComputedStyle ? getComputedStyle(ele)[attr] : ele.currentStyle[attr];
}
// 动画函数 ele:运动元素  targetJson:目标终点值的json  callback:回调函数
function bufferMove(ele, targetJson, callback) {
    clearInterval(ele.timer);
    ele.timer = setInterval(function () {
        // 声明变量,记录状态, 是否每个属性都到达了终点 true:都到了终点
        var tag = true;
        for (var attr in targetJson) {
            // 获取当前值 如果是透明度放大100倍,否则去掉px,方便计算
            if (attr == 'opacity') {
                var current = parseInt(getStyle(ele, attr) * 100);
            } else {
                var current = parseInt(getStyle(ele, attr));
            }
            // 0.9向上取整为1 -0.9向下取整为-1
            var step = (targetJson[attr] - current) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            // console.log(current, step);
            // 当前位置加步长
            current = current + step;
            // 如果有属性没到终点,就把tag变为false
            if (current != targetJson[attr]) {
                tag = false;
            }
            // 如果是透明度,要除以100,否则加上px,赋值
            if (attr == 'opacity') {
                ele.style[attr] = current / 100;
                ele.style.filter = 'alpha(opacity=' + current + ')';
            } else {
                ele.style[attr] = current + 'px';
            }
        }
        // 如果for-in执行完毕后,tag仍为true,代表所有的属性都到了终点,清除定时器
        if (tag) {
            clearInterval(ele.timer);
            // 回调函数执行
            // if (callback) callback();
            callback && callback();
        }
    }, 50);
}

五.js实现自动轮播,点击按钮切换,改变小圆点

var box = document.querySelector('.box');
        var imgList = document.querySelector('.imgList');
        var imgUl = document.querySelector('.imgList ul');
        var imgLis = document.querySelectorAll('.imgList ul li');
        var leftBtn = document.querySelector('.leftBtn');
        var rightBtn = document.querySelector('.rightBtn');
        var circleLis = document.querySelectorAll('.circleList li');
        // 拼接假0
        imgUl.appendChild(imgLis[0].cloneNode(true));
        // 声明变量
        var n = 0;
        // 自动轮播
        var timer = setInterval(rightBtnHandler, 2000);
        // 鼠标进入box, 停止
        box.onmouseover = function () {
            clearInterval(timer);
        }
        // 鼠标离开box, 轮播
        box.onmouseout = function () {
            timer = setInterval(rightBtnHandler, 2000);
        }
        // 右按钮点击事件
        rightBtn.onclick = rightBtnHandler;
        function rightBtnHandler () {
            n++;
            change();
        }
        // 左按钮点击事件
        leftBtn.onclick = function () {
            n--;
            change();
        }
        // 小圆点点击事件
        for (var i = 0; i < circleLis.length; i++) {
            // 自定义索引
            circleLis[i].index = i;
            circleLis[i].onclick = function () {
                // 把点击的小圆点的下标赋值给n,保证小圆点和左右按钮同步
                n = this.index;
                change();
            }
        }
        function change() {
            if (n > imgLis.length) {
                // 当从假0到1的切换时,瞬间来到0的位置,再动画到1
                imgList.style.left = '0px';
                n = 1;
            }
            if (n < 0) {
                // 从真0到4切换时,瞬间到假0,在往4动画
                imgList.style.left = -560 * imgLis.length + 'px';
                n = imgLis.length - 1;
            }
            // 根据n动画
            bufferMove(imgList, { left: -560 * n });
            // 小圆点变色
            for (var i = 0; i < circleLis.length; i++) {
                circleLis[i].className = '';
            }
            var m = n; // 接受n,当假0时,让下标为0的小圆点变色
            circleLis[m > circleLis.length - 1 ? 0 : m].className = 'active';
        }