程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> 更多編程語言 >> 編程綜合問答 >> javascript-麻煩看下這段JQ代碼,一點性能問題

javascript-麻煩看下這段JQ代碼,一點性能問題

編輯:編程綜合問答
麻煩看下這段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)要稍長一點,不知道問題在哪,請問該如何解決或者優化?

最佳回答:


沒看出有什麼問題。300ms多一點你都能看的出來。。。貼你的html,css來看下

showbo
doyoucnm
showbo
doyoucnm
  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved