jQuery-自动轮播优化

jQuery很好用，为了更形象的掌握，添加轮播图。
实现思路：
通过改变图片的地址来优化代码，比如

这样有规律的图片，只需添加一张图，然后修改图的src 内的num就可以。由于ES6的迅速，采用一点方法啦，但完全不影响，甚至更优化。
这里添加了 控件和实现功能，如下：
控件：
1. 左右按钮
2. 指示灯
3. 美图一张（。。。）

实现功能：
1. 左右按钮，切换图片
2. 指示灯切换 鼠标移入切换，还有实时提示灯
3. 自动轮播
4. 鼠标移入，停止自动轮播
5. 鼠标移开，自动轮播

HTML部分

    <div class="wrapper">
        <div class="showImg">
            <img src="../imgs/0_big.jpg" alt="">
        </div>
        <div class="btns">
            <span class="btnLeft">&lt;</span>
            <span class="btnRight">&gt;</span>
        </div>
        <div class="lightTips">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

css部分

        *{
            box-sizing: border-box;
        }
        ul,li{
            list-style: none;
            margin:0;
            padding:0;
        }
        .wrapper{
            position: relative;
            width: 430px;
        }
        .showImg img{
            height:430px;
            width:430px;
        }
        .btns{
            font-size: 25px;
            font-weight: 800;
        }
        .btns span{
            position: absolute;
            top:46%;

            width:25px;
            text-align: center;
            background-color: rgba(1,1,1,0.2);
        }
        .btnLeft{
            left:0;
        }
        .btnRight{
            right:0;
        }
        .lightTips{
            position: absolute;
            bottom: 10%;
            left:10%;
        }
        .lightTips ul{
            display: flex;
            justify-content: space-between;
        }
        .lightTips li{
            height: 10px;
            width:30px;
            margin-right: 12px;
            background-color: rgba(1,1,1,0.2);
        }
        .lightTips li:nth-of-type(1){
            background-color: #00ff0a87;
        }
        .showImgAdd{
            animation-name:xxx;
            animation-duration: 1000;
            animation-timing-function: linear; 
        }
        @keyframes xxx{
            0%{
                opacity: 0;
            }
            100%{
                opacity: 1;
            }
        }

javascript

    <!-- 此处导入jQuery.js 插件 -->
    <script src="../../jQuey.js"></script>
    <script>
        // 轮播指示灯索引值 lightTipIndex
         var lightTipIndex  = 0;
         var src;   //轮播图片地址  src
         var preIndex;  //轮播切换上一张图片的索引值    preIndex
        $('.lightTips li').mouseenter(function(){
            lightTipTabPrev()
            lightTipIndex = $(this).index();    //获取 指示灯集 触发 某个元素的索引
            lightTipTabNext();
        })

        // 按钮事件 左侧
        $('.btnLeft').click(function(){
            lightTipTabPrev();

            lightTipIndex --;
            // 三目运算，如果true 索引为 4 ； 否则 就是自身
            lightTipIndex < 0? lightTipIndex = 4:lightTipIndex; 
            lightTipTabNext();
        })
        // 按钮事件 右侧
        $('.btnRight').click( autoNextImg );

        // 下一张图片切换
        function autoNextImg(){
            lightTipTabPrev();  
            lightTipIndex ++;
            // 三目运算，如果true 索引为 0 ； 否则 就是自身
            lightTipIndex == 5? lightTipIndex = 0:lightTipIndex;
            lightTipTabNext();
        }

        // 清除上一个索引值的样式
        function lightTipTabPrev(){
            preIndex = lightTipIndex;
            $('.lightTips li').eq(preIndex)
            .css('backgroundColor','rgba(1,1,1,0.2)')
        }

        // 增加此时 的索引值的样式
        function lightTipTabNext(){
            src = `../imgs/${lightTipIndex}_big.jpg`;
            $('.showImg img').attr('src',src); //修改地址
            $('.lightTips li').eq(lightTipIndex).css('backgroundColor','#00ff0a87')
        }

        // 自动轮播
        timer = setInterval(autoNextImg ,1500)

        // 鼠标移入 。wrapper   ，清除定时器
        $('.wrapper').mouseenter(function(){
            clearInterval(timer);
        })
        
        // 鼠标移出 。wrapper   ，添加定时器
        $('.wrapper').mouseleave(function(){
            timer = setInterval(autoNextImg,1500)
        })

    </script>

实现效果