jQuery写的轮播图，点击按钮过快会出bug，会一直闪过

[weixin_44573921]

<div class="center">
<div class="center_top">
<!-- <==========================================================> -->
<!-- 轮播图开始区域 -->
<!-- <div id="bannar"> -->
<div class="content_middle">
<ul>


<li style="background:url(./2019/images/xykjr-PC.jpg) no-repeat center center;opacity: 100;filter: alpha(opacity=1);"">
<a target="_blank" href="./2019/xykjr/"></a>
</li>

<li style="background:url(./2019/images/CCTV-PC.jpg) no-repeat center center">
<a target="_blank" href="javascript:swt();"></a>
</li>

<li style="background:url(./images/ba.jpg) no-repeat center center">
<a target="_blank" href="./2018/mqdz/"></a>
</li>

<li style="background:url(./2019/images/sdxy-PC.jpg) no-repeat center center">
<a target="_blank" href="./2019/sdxy/"></a>
</li>

<li style="background:url(./2019/images/DSJ-PC.jpg) no-repeat center center">
<a target="_blank" href="./2019/zw2019/"></a>
</li>

<li style="background:url(/image/0627p.jpg) no-repeat center center;">
<a target="_blank" href="/zt/psdz/"></a>
</li>

<li style="background:url(./2019/images/CCTVzb-PC.jpg) no-repeat center center;">
<a target="_blank" href="javascript:swt();"></a>
</li>


</ul>
<div class="table">

<a class="small_active" href="javascript:;">校园科技日</a>
<a href="javascript:;">央视上榜教育品牌</a>
<a href="javascript:;">2019名企定制</a>
<a href="javascript:;">四大学院正式启动</a>
<a href="javascript:;">展望2019</a>
<a href="javascript:;">1+2 大专直通车</a>
<a href="javascript:;">央视直播</a>

</div>
</div>
</div>
</div>


<script>
var left = $('.content_middle .btnLeft');
var right = $('.content_middle .btnRight');
var aSmall = $('.content_middle .table a');
var aLi = $('.content_middle ul li');
var iNow = 0;
left.click(function(){
iNow--;
if(iNow<0){
iNow=5;
}
aLi.eq(iNow).siblings().stop().animate({
opacity:0

},0);
aLi.eq(iNow).stop().animate({
opacity:1

},0);
aSmall.eq(iNow).addClass('small_active').siblings().removeClass('small_active');
});

right.click(function(){
iNow++;
if(iNow>5){
iNow=0;
}
aLi.eq(iNow).siblings().stop().animate({
opacity:0

},0);
aLi.eq(iNow).stop().animate({
opacity:1

},0);
aSmall.eq(iNow).addClass('small_active').siblings().removeClass('small_active');

});


aSmall.on('click',function(){
var n = $(this).index();
iNow = n;
aLi.eq(iNow).siblings().stop().animate({
opacity:0

},0);
aLi.eq(iNow).stop().animate({
opacity:1

},0);
aSmall.eq(iNow).addClass('small_active').siblings().removeClass('small_active');

});

function move1(){
aLi.eq(iNow).siblings().stop().animate({
opacity:0

},0);
aLi.eq(iNow).stop().animate({
opacity:1
},0);

aSmall.eq(iNow).addClass('small_active').siblings().removeClass('small_active');
}

function run2(){
iNow++;
if(iNow>5){
iNow=0;
}
move1();
}

timer = setInterval(run2,6000);

$(".content_middle").on('click',function(){
clearInterval(timer);
},function(){
timer = setInterval(run2,6000);
})


var links=document.getElementById('linkbtn');
var btns=links.querySelectorAll('li');
var blink=document.getElementById('mylink');
var blinks=blink.querySelectorAll('ul');
btns[1].onmouseover=function(){
blinks[1].style.display='none';
blinks[2].style.display='block';
btns[1].className='changes';
btns[0].className='';
};
btns[0].onmouseover=function(){
blinks[2].style.display='none';
blinks[1].style.display='block';
btns[1].className='';
btns[0].className='changes';
}

</script>
麻烦大佬看下这是什么情况

[jio可]

你这个是定时器使用错误，点击多了同时执行多个定时器。网上很多的轮播例子，找源码看看吧

[dragoo1]

试一下swiper

[風灬雲]

 $(".content_middle").on('click',function(){
        clearInterval(timer);
    },function(){
        timer = setInterval(run2,6000);
    })

on()，有传两个函数的写法？我怎么没见过= =

[風灬雲]

还有个问题，你给父元素绑定了点击事件，那么子元素的点击事件就应该做好阻止事件冒泡的处理