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

jQuery特色内容滑块

1 个答案: