麻烦看下这段JQ代码,一点性能问题

<head>
<style type="text/css">

.scroll_div{width:1000px; height:370px; margin:0 auto; padding:10px;}
.scroll_div .pic{width:820px; height:370px; overflow:hidden; position:relative; float:left;}
.scroll_div .pic li{width:820px; height:370px; position:absolute; top:0; left:0; display:none;}
.scroll_div .btn{float:right; width:173px;}
.scroll_div .btn li{width:173px; height:66px; display:block; float:left; text-align:center; color:#fff; font:18px/100% "微软雅黑"; font-weight:bold; background:#008dd8; margin-bottom:10px; line-height:66px; cursor:pointer;}
.scroll_div .btn li.on{background:#d73737;}

li {list-style:none;}
img{width:100%;}

</style>

</head>

<body>
<div class="scroll_div">
<ul class="pic">
<li><img src="images/1.jpg" /></li>
<li><img src="images/2.jpg" /></li>
<li><img src="images/3.jpg" /></li>
<li><img src="images/4.jpg" /></li>
<li><img src="images/5.jpg" /></li>
</ul>
<ul class="btn">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
<li>项目四</li>
<li>项目五</li>
</ul>
</div>

</body>

    <script type="text/javascript">

$(function(){
var listLen = $(".pic li").length, //li的个数
i=0,//下标初始值
setInter,speen = 1500;//自动运行间隔
/*图片轮播*/
$(".btn li:last").css({"margin":"0px 0px 0px 0px"});//最后一个按钮样式
$(".btn li:first").addClass("on");//为每个按钮增加的样式
$(".pic li:first").show();//第一个图片展示

$(".btn li").each(function(index,element){//点击显示不同图片
$(element).click(function(){
i = index;//选择器位置
$(this).addClass("on").siblings().removeClass("on");//为当前按钮高亮
$(".pic li").eq(index).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
})//图片随着按钮的切换动作
$(".pic li").hover(function(){//鼠标悬停停止自动播放(停止Interval)
clearInterval(setInter);
},function(){
outPlay();
});
})


out_fun = function(){
if(i < listLen){i++;}else{i=0;};//判定位置,超过位置则重置到第一张位置。这里重置到第一张时会有延迟,目测比300多一点。
$(".btn li").eq(i).addClass("on").siblings().removeClass("on");
$(".pic li").eq(i).animate({opacity:"show"},300).siblings().animate({opacity:"hide"},300);
}

outPlay = function(){
setInter = setInterval("out_fun()",speen);//周期循环调用
}
outPlay();//自动播放
})

</script>

这是一段自动播放和切换的JQ代码,然后发现当播放到最后一张跳到第一张时会比平常的播放时间(这里是300)要稍长一点,不知道问题在哪,请问该如何解决或者优化?

2个回答

没看出有什么问题。300ms多一点你都能看的出来。。。贴你的html,css来看下

doyoucnm
晴明qm 回复showbo: 恩恩
接近 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复晴明桑: 接的采纳就行。。~嘿嘿
接近 5 年之前 回复
doyoucnm
晴明qm 回复showbo: 哦哦,原来如此,我试试,多谢啦
接近 5 年之前 回复
showbo
支付宝加好友偷能量挖 回复晴明桑: 没注意看。嘿嘿,改out_fun = function () { if (i < listLen - 1) { i++; } else { i = 0; };这里,i要小于listLen-1才增加,因为你的i是从0开始记录的
接近 5 年之前 回复
doyoucnm
晴明qm 加上了麻烦看下
接近 5 年之前 回复

不要用setInterval

doyoucnm
晴明qm 那请问用什么
接近 5 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问