2
My slideshow已經經歷了幾次迭代，但它從未擺脫過這個問題。它會像預期的那樣運行一段時間，然後突然開始切換幻燈片而沒有任何延遲。如果不是因爲動畫它很可能以光速運行...setTimeout在我的循環javascript幻燈片功能中工作了一段時間，然後停止延遲
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<meta name="Description" content="Calvary Chapel Chico is a non-denominational,Bible-believing church established to worship,glorify,and share the good news of our Lord and Savior,Jesus Christ." />
<title>Calvary Chapel Chico</title>
<!--<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold"/>-->
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="Top450">
<div id="TitleBar">
<div id="Logo"></div>
<h1>Calvary Chapel Chico</h1>
<a id="Login" href="">Login</a>
</div>
<div id="SlideShow">
<div id="Banner">
<div id="SMedia">Insert Media Links Here</div>
<div id="SMinistries">Insert Ministry links Here</div>
<div id="SServiceTimes">Insert Service Times Here</br><div style="background:#fff;">TEST</div></div>
<div id="SWelcome">Welcome to</br><span id="WelcomeText">Calvary Chapel Chico Online</span></div>
<a id="S5" href="2.html">2</a>
<a id="S6" href="2.html">3</a>
<a id="S7" href="2.html">4</a>
</div>
</div>
<div id="MenuBar">
<div class="Pages">
<a id="Home" href="2.html" class="current">Home</a>
<a id="About" href="2.html">About</a>
<a id="Media" href="#" rel="1" class="SlidePage">Media</a>
<a id="Ministries" href="#" rel="2" class="SlidePage">Ministries</a>
<a id="ServiceTimes" href="#" rel="3" class="SlidePage">Service Times & Directions</a>
</div>
<div class="BannerButtons">
<a href="#" rel="4"></a>
<a href="#" rel="5"></a>
<a href="#" rel="6"></a>
<a href="#" rel="7"></a>
</div>
</div>
</div>
<div id="Body">
<div id="Left300">
<div id="LeftTopTabs" class="Tabs">
<div id="LeftTopTabBar" class="TabBar">
<a href="#LTT-1">News</a>
<a href="#LTT-2">Media</a>
<a href="#LTT-3">Calendar</a>
</div>
<div id="LeftTopPanes" class="Panes">
<div id="LTT-1">Lorem ipsum dolor sit amet</div>
<div id="LTT-2">Nunc in tempor sem.</div>
<div id="LTT-3">Sed diam nisl,</div>
</div>
</div>
</div>
<div id="Right700">
Lorem ipsum dolor sit amet
</div>
</div>
<div id="Bottom450">
</div>
</body>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
</html>
的javascript：
$(
function() {
//===================================================================================================================================
//Setup
//===================================================================================================================================
//Initialize variables
var Pause
var NextSlide
var RepeatTimer
var SlideshowTimer
var $CurrentSlide
//Slideshow setup
$(".BannerButtons a:first").addClass("current");//Force the first slide's button to be the "CurrentSlide"
$(".BannerButtons").show();
var SlideWidth=$("#SlideShow").width();
$("#Banner").css({'width':[SlideWidth*[$("#Banner>*").size()]]});
//Tabs setup
var $CurrentTab=$(".TabBar a:first").next();
//===================================================================================================================================
//Slideshow Functions
//===================================================================================================================================
//Move to the Next Slide
NextSlide=function(){
var image_reelPosition=[$CurrentSlide.attr("rel")-1]*SlideWidth;//Computes distance to the left edge of the slide in pixels
$(".BannerButtons a,.SlidePage").removeClass("current");//Make the old "CurrentSlide" no longer the "CurrentSlide"
$("#Banner").animate({left:-image_reelPosition},900);//Next slide animation
$CurrentSlide.addClass("current");//Make the new "CurrentSlide" current
};
//Repeat slide changes
RepeatTimer=function(){
$CurrentSlide=$('.BannerButtons a.current').next();//Make the next "CurrentSlide" current
if($CurrentSlide.length===0){$CurrentSlide=$('.BannerButtons a:first');};//If end of buttons is reached, go back to the beginning
NextSlide();//Go to the next slide
SlideshowTimer();
};
//Repeat slide changes every 10 seconds
SlideshowTimer=function(){
clearTimeout(Pause);//Clear the timer
Pause=setTimeout(RepeatTimer,10000);//Reset the timer
};
//Hover
$("#Banner").hover(
function(){//Hover trigger
clearTimeout(Pause);//Clear the timer
},function(){//Cease to hover trigger
Pause=setTimeout(RepeatTimer,2000);//Reset the timer
});
//Click
$(".BannerButtons a,.SlidePage").click(
function(){
$CurrentSlide=$(this);//Make the clicked object the "CurrentSlide"
clearTimeout(Pause);//Clear the timer
NextSlide();//Go to the clicked slide
SlideshowTimer();//Reset the timer
return false;//Keep the # out of the URL
}
);
//===================================================================================================================================
//Tab Functions
//===================================================================================================================================
//Move to the clicked tab
ChangeTab=function(){
$(".TabBar>a").removeClass("current");
$CurrentTab.addClass("current");//Force the first slide's button to be the "CurrentTab"
$CurrentPane=$($CurrentTab.attr("href"));
$(".Panes>div").addClass("HiddenPane");
$CurrentPane.removeClass("HiddenPane");
};
//Click
$(".TabBar>a").click(
function(){
$CurrentTab=$(this);//Make the clicked object the "CurrentSlide"
ChangeTab();//Go to the clicked tab
return false;//Keep the # out of the URL
}
);
//===================================================================================================================================
//Start Slide Show
SlideshowTimer();
//Initialize Tabs
ChangeTab();
//END
}
);
這並不能解釋爲什麼它會加快速度並保持速度，但是在你正在清理的'.hover（）'處理程序中，將計時器重置爲2000（兩秒），而主要的'SlideshowTimer'函數使用10000（十秒）。我建議你定義一個常量來保存延遲時間，並且/或者通過調用'.hover（）'處理程序中的'SlideshowTimer'重新啓動定時器。 – nnnnnn