javascript – jQuery精选内容滑块

2019年8月1日 171次阅读

我有一个内容区域循环通过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>

最佳答案 在设置间隔的init函数中,也可以立即调用它,如下所示：

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

此外,如果你正在调用一个没有任何参数的函数,你可以只传递函数,不需要包装它的匿名方法,如下所示：

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