小控件—— 原生js写轮播图

html

css

    <div class="caricature w" id= 'three'>
            <div class="headline">漫画简介</div>
            <p class="subtitle">漫画导读</p>
            <div class="focus">
                <a class="arrow-left" href="javascript:;">＜</a>
                <a class="arrow-right" href="javascript:;">＞</a>
                <div class="husk">
                    <ul class="pic">
                        <li><img src="./images/mh.jpg" alt=""></li>
                        <li><img src="./images/mh2.jpg" alt=""></li>
                        <li><img src="./images/mh3.jpg" alt=""></li>
                        <li><img src="./images/mh4.jpg" alt=""></li>
                        <li><img src="./images/mh5.jpg" alt=""></li>
                    </ul>
                    <ol class="circle">
                    </ol>
                </div>
            </div>
        </div>

/* 5.漫画模块开始了 */
/* 外部的焦点图背景 */
.focus {
    position: relative;
    margin:15px auto 0;
    width: 90%;
    height: 500px;
    background-color: rgba(203, 153, 197,0.4);
}

/* 大的ul被套在另外一个和li一样大的盒子里,我们叫它.husk里面 */
.focus .husk {
    position: absolute;
    left: 200px;
    z-index: 1000;
    width: 430px;
    height: 500px;
    background-color: purple;
    overflow: hidden;
}

/* 内部的焦点图内容 */
.focus .pic {
    position: absolute;
    top:0;
    width: 2580px;
    height: 500px;
    background-color: skyblue;
}

.focus .pic li {
    float: left;
    width: 430px;
    height: 500px;
}

.focus .pic li img{
    width: 100%;
    height: auto;
}

/* 左右箭头的定位 */
.arrow-left,
.arrow-right {
    display: none;
    position: absolute;
    z-index: 1001;
    top:50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-color:rgba(128,128,128,0.4);
    font-size: 20px;
}

.arrow-left {
    left: 0;
    border-radius: 0 15px 15px 0;
}

.arrow-right {
    right:0;
    border-radius: 15px 0 0 15px;
}

/* 下方的小圆点 */
.focus ol{
    display: flex;
    position: absolute;
    z-index: 999;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #ccc;
    border-radius: 18px;
}

.focus ol li {
    display: 1;
    background-color: #fff;
    margin:3px 5px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
}

/* 小圆点点击切换颜色的类 */

/* 为什么不变颜色，答:因为权重不够 */
.focus ol .changeColor {
    background-color: red;
   
}

js

 // 5.caricature漫画模块
    // 轮播图

    var arrowLeft = document.querySelector('.arrow-left')
    var arrowRight = document.querySelector('.arrow-right')
    var focusBg = document.querySelector('.focus')
    var focusUl = document.querySelector('.pic')
    var focusOl = document.querySelector('.circle')
    var moveStep = focusUl.children[0].offsetWidth

    // 第七步：设置节流阀
    var flag = true;

    // 第一步:鼠标移入移出，左右箭头出现消失
    focusBg.addEventListener('mouseenter', function () {
        arrowLeft.style.display = 'block'
        arrowRight.style.display = 'block'
        clearInterval(timer)
    })
    focusBg.addEventListener('mouseleave', function () {
        arrowLeft.style.display = 'none'
        arrowRight.style.display = 'none'
        timer = setInterval(function () {
            arrowLeft.click()
        }, 2000)
    })

    // 第二步:封装一个缓动动画
    function animate(obj, target, callback) {
        clearInterval(timer)
        var timer = setInterval(function () {
            // 注意offsetLeft还是offsetWidth
            var objOffsetLeft = obj.offsetLeft
            // 步长必须写到计时器里面，异步执行
            var step = (target - objOffsetLeft) / 10
            step = step > 0 ? Math.ceil(step) : Math.floor(step)
            // 有正有负，所以必须写等于
            if (objOffsetLeft == target) {
                clearInterval(timer)
                if (callback) {
                    callback()
                }
            } else {
                // offsetWidth只是可读属性，style.left还要注意带单位
                obj.style.left = objOffsetLeft + step + 'px'
            }
        }, 30)
    }

    // 第三步：创建小圆点,为小圆点添加点击事件，变换颜色，切换图片
    for (var i = 0; i <= focusUl.children.length - 1; i++) {
        var li = document.createElement('li')
        li.setAttribute('index', i)
        // 注意带引号与不要带引号，是li而不是“li”
        focusOl.appendChild(li)
        // 为小圆点添加点击事件，变化背景颜色 点击事件，排他思想

        li.addEventListener('click', function () {
            // 写在点击事件里面
            if (flag) {
                flag = false   //关闭节流阀
                // 此时要写focusOl.children.length 回调函数，li已经创建成功了
                for (var i = 0; i < focusOl.children.length; i++) {
                    focusOl.children[i].className = ''
                }
                this.className = 'changeColor'
                // 必须要用this,拿到当前小圆点的索引号
                // index是在点击事件中小圆点的索引号
                var index = this.getAttribute('index')
                num = index;
                circle = index;
                // 每次走的是ul里面一个小li的距离
                var moveTarget = -index * moveStep
                // console.log(moveTarget);
                animate(focusUl, moveTarget, function () {
                    flag = true   //动画结束，打开节流阀
                })
            }
        })
    }

    focusOl.children[0].className = 'changeColor'

    // 深拷贝第一张,深拷贝是为了左右箭头服务的
    // 刚刚没有拷贝成功，因为写在了点击事件里面
    var first = focusUl.children[0].cloneNode(true)
    focusUl.appendChild(first)

    // 第四步：左箭头事件
    // num 是第一、第二、第三张图片
    var num = 0
    // circle 是第一、第二、第三个小圆点
    var circle = 0

    arrowLeft.addEventListener('click', function () {
        if (flag) {
            flag = false
            // 左箭头控制图片的轮播
            if (num == 5) {
                num = 0
                focusUl.style.left = "200px"
            }
            num++
            animate(focusUl, -num * moveStep, function () {
                flag = true
            })

            // 左箭头控制小圆点的颜色变化
            circle++
            if (circle == 5) {
                circle = 0
            }
            for (var i = 0; i < focusOl.children.length; i++) {
                focusOl.children[i].className = ''
            }
            focusOl.children[circle].className = 'changeColor'
        }
    })

    // 第五步：右箭头事件
    arrowRight.addEventListener('click', function () {
        if (flag) {
            flag = false
            // 右箭头控制图片的轮播
            if (num <= 0) {
                num = 5
                focusUl.style.left = -num * moveStep + 'px'
            }
            num--
            animate(focusUl, -num * moveStep, function () {
                flag = true
            })

            // 右箭头控制小圆点的颜色变化
            if (circle <= 0) {
                circle = 5
            }
            // 如果circle是0的话，那么点击一次就直接变成4了
            circle--

            for (var i = 0; i < focusOl.children.length; i++) {
                focusOl.children[i].className = ''
            }
            focusOl.children[circle].className = 'changeColor'
        }
    })

    // 第六步:设置自动播放
    var timer = setInterval(function () {
        arrowLeft.click()
    }, 2000)