jQuery精選內容滑塊

Question

我有一個內容區域，通過div循環顯示那裏的內容。

我很難讓它顯示初始內容，不幸的是它在觸發第一個內容區域顯示前等待5000毫秒。

任何人都可以通過簡單的方法使其顯示初始區域，然後滑動到下一個區域並在5000毫秒內完成。

JS

Model.FeatureBar = { 
current:0, 
items:{}, 
init: function init(options){ 
    var me = this; 
    me.triggers = [] 
    me.slides = [] 
    this.container = jQuery('#features'); 
    jQuery('.feature').each(function(i){ 
     me.triggers[i] = {url: jQuery(this).children('.feature-title a').href, title: jQuery(this).children('.feature-title'),description:jQuery(this).children('.feature-description')} 
     me.slides[i] = {image: jQuery(this).children('.feature-image')} 
    }); 

    for(var i in this.slides){ 
     this.slides[i].image.hide(); 
     this.triggers[i].description.hide(); 
    } 

    setInterval(function(){Model.FeatureBar.next()},5000); 
}, 
next: function next(){ 
    var i = (this.current+1 < this.triggers.length) ? this.current+1 : 0; 
    this.goToItem(i); 
}, 
previous: function previous(){ 
    var i = (this.current-1 > 1) ? this.current-1 : this.triggers.length; 
    this.goToItem(i); 
}, 
goToItem: function goToItem(i){ 
    if(!this.slides[i]) 
     throw 'Slide out of range'; 
    this.triggers[this.current].description.slideUp(); 
    this.triggers[i].description.slideDown(); 

    this.slides[this.current].image.hide(); 
    this.slides[i].image.show(); 

    this.current = i; 
}, 

}

HTML

<div id="features"> 
<div class="feature current"> 
<div class="movie-cover"> 
<a href="/police/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> 
</div> 
<div class="feature-image" style="display: none;"> 
<img src="/design/images/four-oh-four.png"> 
</div> 
<h2 class="feature-title"><a href="/police/movie">Police</a></h2> 
<p class="feature-description" style="overflow: hidden; display: block; height: 50.8604px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> 
</div> 

<div class="feature"> 
<div class="movie-cover"> 
<a href="/rude/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> 
</div> 
<div class="feature-image" style="display: none;"> 
<img src="/design/images/four-oh-four.png"> 
</div> 
<h2 class="feature-title"><a href="/rude/movie">Rude</a></h2> 
<p class="feature-description" style="overflow: hidden; display: block; height: 18.3475px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> 
</div> 

<div class="feature"> 
<div class="movie-cover"> 
<a href="/brits/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> 
</div> 
<div class="feature-image" style="display: block;"> 
<img src="/design/images/four-oh-four.png"> 
</div> 
<h2 class="feature-title"><a href="/brits/movie">Brits</a></h2> 
<p class="feature-description" style="overflow: hidden; display: block; height: 40.1549px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> 
</div> 

<div class="feature"> 
<div class="movie-cover"> 
<a href="/indie/movie"><img title="" alt="" src="/design/images/four-oh-four.png"></a> 
</div> 
<div class="feature-image" style="display: none;"> 
<img src="/design/images/four-oh-four.png"> 
</div> 
<h2 class="feature-title"><a href="/indie/movie">Indie</a></h2> 
<p class="feature-description" style="overflow: hidden; display: block; height: 42.4247px; margin-top: 0px; margin-bottom: 0px; padding-top: 0px; padding-bottom: 0px;">DESCRIPTION</p> 
</div> 

Answer 1

在你init功能設置的時間間隔時，只是把它曾經立即爲好，像這樣：

setInterval(function(){Model.FeatureBar.next()},5000); 
Model.FeatureBar.next(); 

另外，如果你調用不帶任何參數的函數，你可以通過剛纔的功能，無需匿名方法包裝，就像這樣：

setInterval(Model.FeatureBar.next,5000); 
Model.FeatureBar.next();