javascript - jQuery 特色内容 slider

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();