改写‘jQuery实现手风琴轮播图’项目

它是一个很简单的实现背景图与鼠标选中图的保持一致的DEMO，为它添加轮播图效果
要求：
- 进入页面，每隔3000ms切换显示图片，页面背景与显示图片保持一致；
- 当鼠标触发mouseover事件时，立即停止轮播，根据鼠标选择的图片切换背景图；
- 当鼠标移开，即触发mouseout事件时，恢复轮播；

html代码

    <div id="main">
        <div class="bg bg-1"></div>
        <div class="bg bg-2"></div>
        <div class="bg bg-3"></div>
        <div class="bg bg-4"></div>
        <div id="container">
            <ul>
                <li>
                    <div class="text">Lorem, ipsum.</div>
                </li>
                <li>
                    <div class="text">Lorem, ipsum.</div>
                </li>
                <li>
                    <div class="text">Lorem, ipsum.</div>
                </li>
                <li class="cur">
                    <div class="text">Lorem, ipsum.</div>
                </li>
            </ul>
        </div>
    </div>

css 代码

        #main {
            width: 100%;
            height: 100%;
        }

        .bg {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .bg-1 {
            background: url('../../img/20170715114413_uNWMF.jpeg') no-repeat center / cover;
        }

        .bg-2 {
            background: url('../../img/ea43e4da8e523981336bee96467de846.jpeg') no-repeat center / cover;
        }

        .bg-3 {
            background: url('../../img/19c53f49e739b7649ab92218d39f62aafab344d8.png') no-repeat center / cover;
        }

        .bg-4 {
            background: url('../../img/0329f4a8d61bc2247b9e0954c4210153.jpeg') no-repeat center / cover;
        }

        #container {
            position: absolute;
            width: 1000px;
            height: 400px;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        ul {
            height: 100%;
        }

        ul>li {
            float: left;
            position: relative;
            width: 100px;
            height: 100%;
            overflow: hidden;
            cursor: pointer;
        }

        ul>li::before {
            content: "";
            position: absolute;
            width: 100px;
            height: 100%;
            top: 0;
            left: 0;
            background: white;
            opacity: .5;
            transition: all .5s;
        }

        ul>li.cur::before{
            opacity: 0;
        }

        ul>li:nth-child(1) {
            background: url('../../img/20170715114413_uNWMF.jpeg') no-repeat center / cover;
        }

        ul>li:nth-child(2) {
            background: url('../../img/ea43e4da8e523981336bee96467de846.jpeg') no-repeat center / cover;
        }

        ul>li:nth-child(3) {
            background: url('../../img/19c53f49e739b7649ab92218d39f62aafab344d8.png') no-repeat center / cover;
        }

        ul>li:nth-child(4) {
            background: url('../../img/0329f4a8d61bc2247b9e0954c4210153.jpeg') no-repeat center / cover;
            width: 700px;
        }

        .text {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100%;
            text-align: center;
            color: bisque;
            padding-top: 20px;
        }

jQuery代码

        let timerLoop;
        let curIndex;

        function change() {
            // 方法名：cur类名已经改写，根据cur类名对DOM进行操作
            $('#container li').not('.cur').stop(false, true).animate({
                'width': '100px'
            }, 250, 'linear');
            $('#container li.cur').stop(false, true).animate({
                'width': '700px'
            }, 250, 'linear');

            $('.bg').stop(false, true).fadeOut(250);
            $('.bg:eq(' + curIndex + ')').stop(false, true).fadeIn(250);

            // 对当前li元素内没有cur类名的执行 宽度100px 的操作
            // 对当前li元素内有cur类名的执行 宽度700px 的操作
            // 对背景里所有项执行 fadeOut 操作
            // 对 index与 li.cur 相同的 .bg 执行 fadeIn 操作
        }

        function setNextCur() {
            // 方法名：设置下一项li元素为cur类
            $('#container li').each(function (index) {
                if ($(this).hasClass('cur')) {
                    curIndex = index;
                    curIndex++;

                    if (curIndex == 4) {
                        curIndex = 0;
                    }
                }
            });
            // 最开始时下面两句代码写进了each函数中，很低级的错误
            $('#container li').removeClass('cur');
            $('#container li:eq(' + curIndex + ')').addClass('cur');
            // change();
            // 这里也犯了一个低级错误，我在这里调用了change，在loopPlayback函数内部又调用了change，连续两次造成了过渡动画失效的情况。
            // 对li元素每一项进行判断：判断是否存在cur类名
            // 找到有cur类名的li元素，对全部li元素执行删去cur类名的操作，对当前的下一项li元素执行添加cur类名的操作
        }

        function loopPlayback() {
            timerLoop = setInterval(function () {
                setNextCur();
                change();
            }, 3000);
        }


        function mouseOverChange() {
            // 鼠标移动到li元素上，立刻停止所有循环函数，然后检查当前li元素是否是当前展示元素，如果不是则将当前li元素设置为cur类
            $('#container li').mouseover(function () {
                clearInterval(timerLoop);
                if (!$(this).hasClass('cur')) {
                    $('#container li').removeClass('cur');
                    $(this).addClass('cur');
                    $('#container li').each(function (index) {
                        if ($(this).hasClass('cur')) {
                            curIndex = index;
                        }
                    });

                    change();
                }
            });
        }

        $(function () {
            loopPlayback();
            mouseOverChange();

            $('#container li').mouseout(function () {
                loopPlayback();
            })
        });

DEMO练习后记：
- each()：在写DEMO的时候犯了一个致命错误，通过each检查li每一项时候有.cur类名时，直接在each中重置了.cur类名，代码见上面jq代码函数setNextCur;
- 如何使用jQuery获取伪元素：我在div.text前写了伪元素用以实现不透明的效果，某个li展示时希望改为透明效果。但是jQuery是基于DOM操作的，而伪元素不是DOM元素，因此无法使用jQ操作它。
  - 使用JS控制伪元素的几种方法
- 在setNextCur函数内还犯了一个错误，重复调用change导致过渡动画失效，见注释。