jquery实现轮播切换（简洁版）

效果示例：

主要实现思路：

利用定时器。使用setInterval() 方法间隔调用函数，从而实现循环切换。当使用鼠标切换的时候，先使用clearInterval()来停止定时操作，待切换到对应的图案后再恢复循环。

代码如下：

js:

var liNum = 0
 function moveImg(){
     scrollT = setInterval(()=>{
         liNum++
         if(liNum > 2){
             liNum = 0 // 从头开始
         }
         console.log(liNum)
         $('.scroll-item li').eq(liNum).addClass('active').siblings().removeClass('active') 
     },3000)
 }
 moveImg()
 $('.points li').on('click',function(){
     clearInterval(scrollT)
     liNum = $(this).index() // 将当前的index值复制给liNum ，以保证循环从这一张开始
     $('.scroll-item li').eq(liNum).addClass('active').siblings().removeClass('active')
     moveImg()
 })

html:

<div class="equity" style="position: relative;">
    <ul class="points" style="list-style: none;">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <ul class="scroll-item" style="">
        <li class="" style="background: pink;width: 1000px;height: 500px;"></li>
        <li class="" style="width: 1000px;height: 500px;background: green;"></li>
        <li class="active" style="width: 1000px;height: 500px;background: purple;"></li>
    </ul>
</div>

css:

.equity .scroll-item li {
    display: none;
}
.equity .scroll-item li.active {
    display: block;
}
.equity .scroll-item {
    width: 1000px;
    height: 500px;
    overflow: hidden;
}
.equity .points li {
    position: absolute;
    width: 230px;
    height: 100px;
    left: 33px;
    top: 77px;
    cursor: pointer;
    color: #333;
    text-align: center;
    font-size: 30px;
    background: white;
}