jQuery 无缝滚动轮播图

jQuery实现轮播图还是比较容易的，代码量相对较少
HTML代码：

 <div class="slider">
        <div>
            <div class="slider-panner sp-1 active">
                <div>
                    <img src="https://img.alicdn.com/simba/img/TB1fN3WA7CWBuNjy0FaSutUlXXa.jpg" alt="">
                </div>
            </div>
            <div class="slider-panner sp-2">
                <div>
                    <img src="https://img.alicdn.com/tps/i4/TB1o_JiAVOWBuNjy0FiSutFxVXa.jpg" alt="">
                </div>
            </div>
            <div class="slider-panner sp-3">
                <div>
                    <img src="https://img.alicdn.com/simba/img/TB114X1gBjTBKNjSZFuSuv0HFXa.jpg" alt="">
                </div>
            </div>
        </div>
        <div class="list-btn">
            <ul>
                <li class="active"></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>

css代码

 *{
            margin:0;
            padding:0;
        }
        li{
            list-style: none;
        }
        .slider{
            height: 500px;
            position: relative;
        }
        .slider-panner{
            height: 500px;
            width: 100%;
            position: absolute;
            transition: all 1s ease;
            opacity: 0;
        }
        .slider-panner div{
            width: 1230px;
            margin: 0 auto;
        }
        .sp-1{
            background:  rgb(232, 232, 232);
        }
        .sp-2{
            background: rgb(0,0,0);
        }
        .sp-3{
            background: rgb(232, 232, 232);
        }
        .active{
            z-index: 2;
            opacity: 1;
        }
        .list-btn{
            position: absolute;
            z-index: 10;
            bottom: 20px;
            left: 50%;
            transform: translate(-50%);
        }
        .list-btn li{
            float: left;
            height: 5px;
            width: 25px;
            margin-left: 5px;
            background: rgba(0,0,0,.3);
        }
        .list-btn li.active{
            background: rgba(255,255,255,.8);
        }

现在是jQuery部分

     var thisIndex=0;
        var isRun=true;//定义一个变量 控制是否执行轮播
        setInterval(function () {
            if(isRun){
                ++thisIndex;
                run();
            }
        },1000);
        function run() {
            if(thisIndex>=3){//判断边界
                thisIndex=0;
            }
            $('.slider-panner').eq(thisIndex).addClass('active').siblings().removeClass('active');//找到相应元素，并给自己加一个class，同时把其他元素的class移除
            $('.list-btn li').eq(thisIndex).addClass('active').siblings().removeClass('active');
        }

        $('.list-btn li').on('mouseover',function () {//点击按钮 显示相应图片
            thisIndex=$(this).index();
            run();
        });

        $('.slider').hover(function () {//鼠标划入 停止轮播
            isRun=false;
        },function () {
            isRun=true;
        })