2010-05-13 4 views
4

У меня есть область содержимого, которая проходит через div и показывает содержимое.jQuery featured content slider

У меня возникли проблемы с отображением исходного содержимого, к сожалению, он ждет 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> 

+0

У меня кружится голова с кодами! : Р – Reigel

ответ

2

В вашей init функции при установке интервала, просто вызовите его один раз сразу же хорошо, как это:

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

Кроме того, если вы вызываете функцию без каких-либо параметров, вы можете передать только функцию, нет необходимости для анонимного метода не окружив его, как это:

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

Безупречный ответ, слишком плохо я из голосов :( Вы получаете виртуальный +1 – GlenCrawford

+0

Это оленья кожа исправить Также отметим, что его называют в конце уже в междунар – azz0r

+1

@ azz0r - Вы... 'установить ** интервал ** в конце init ... но я не вижу 'Model.FeatureBar.next();' там, мой ответ имеет 2 строки, ваш ваш 'init', вы в настоящее время есть 1 :) –

Смежные вопросы