圖像旋轉功能以第二張圖像開頭，不是第一張

Question

我用簡單的圖像旋轉器和縮略圖設置了一個小提琴。但是，當頁面加載腳本時，會從第二個圖像開始。

SO上的類似帖子提到將active類移動到最後的圖像和縮略圖。這不是一個好的解決方案。

我需要修改哪些內容才能從第一張圖像和縮略圖開始？

這裏是我的小提琴：http://jsfiddle.net/yCXka/4/

，代碼：

HTML

<div id="bigImage"> 
    <img src="http://www.placehold.it/500x200&text=500" width="500" height="200" id="image1" class="active"/> 
    <img src="http://www.placehold.it/400x175&text=400" width="400" height="175" id="image2" /> 
    <img src="http://www.placehold.it/300x150&text=300" width="300" height="150" id="image3" /> 
    <img src="http://www.placehold.it/200x125&text=200" width="200" height="125" id="image4" /> 
</div> 
<ul id="thumbnails"> 
    <li class="activeThumbnail"><img src="http://www.placehold.it/140x100&text=500" width="140" height="100" /></li> 
    <li><img src="http://www.placehold.it/140x100&text=400" width="140" height="100" /></li> 
    <li><img src="http://www.placehold.it/140x100&text=300" width="140" height="100" /></li> 
    <li><img src="http://www.placehold.it/140x100&text=200" width="140" height="100" /></li> 
</ul> 

CSS：

* { 
    margin:0; 
    padding:0; 
} 

#bigImage { 
    width:500px; 
    height:200px; 
    margin-bottom:30px; 
    overflow:hidden; 
} 

#bigImage img { 
    display:none; 
} 

#bigImage .active { 
    display:inline; 
} 

#thumbnails { 
    clear:both; 
    width:610px; 
    height:100px; 
} 

#thumbnails li { 
    float:left; 
    width:140px; 
    height:100px; 
    margin-right:10px; 
    list-style-type:none; 
} 

.activeThumbnail { 
    border:5px solid lime; 
} 

JS：

$(document).ready(function(){ 
    imageRotator(); 

    // inspiration: 
    //http://aarontennyson.com/tutorials/demos/slide_show_fade/ 
}); 

function imageRotator() { 

    var active = $('#bigImage .active'), 
     thumbnails = $('#thumbnails li'), 
     activeThumbnail = $('#thumbnails .activeThumbnail'), 
     activeID = active.prop('id'), 
     next = active.next().length ? active.next() : active.parent().children(':first'), 
     nextThumb = activeThumbnail.next().length ? activeThumbnail.next() : activeThumbnail.parent().children(':first'); 

    active.fadeOut(800, function() { 

     thumbnails.removeClass('activeThumbnail'); 
     nextThumb.addClass('activeThumbnail'); 

     next.fadeIn(800).addClass('active'); 
    }).removeClass('active'); 

    setTimeout(imageRotator, 5000); 
} 

謝謝！

Answer 1

嘗試

$(document).ready(function(){ 
    imageRotator(); 

    // inspiration: 
    //http://aarontennyson.com/tutorials/demos/slide_show_fade/ 
}); 

function imageRotator() { 

    var active = $('#bigImage .active'), 
     thumbnails = $('#thumbnails li'), 
     activeThumbnail = $('#thumbnails .activeThumbnail'), 
     activeID = active.prop('id'), 
     next = active.next().length ? active.next() : active.parent().children(':first'), 
     nextThumb = activeThumbnail.next().length ? activeThumbnail.next() : activeThumbnail.parent().children(':first'); 
    // `.show()` `$(active)`, `0` `duration` 
    // `.delay()` `1200` `duration`, 
    // for page load time, adjustable 
    // continue to `.fadeOut()` method 
    $(active).show(0).delay(1200).fadeOut(800, function() { 

     thumbnails.removeClass('activeThumbnail'); 
     nextThumb.addClass('activeThumbnail'); 

     next.fadeIn(800).addClass('active'); 
    }).removeClass('active'); 

    setTimeout(imageRotator, 5000); 
} 

的jsfiddle http://jsfiddle.net/guest271314/n868c/

編輯

這確實有助於！並不完美，但有訣竅。 怎麼樣設置一個真正的標誌，然後旋轉器啓動？有沒有辦法 這樣做？ - JsusSalv

$(document).ready(function() { 
    // `flag` = `started`, default `false`, 
    // `.on()` `click` of `:first` `#bigImage`, 
    // or `:first` `#thumbnails` (`selectors`, `event`, adjustable) 
    // `img`, `flag` set to `true`, 
    // if `flag` === `true`, 
    // call (start) `imageRotator()` 
    var started = false; 
    $("#bigImage img:first, #thumbnails li img:first") 
    .on("click", function(e) { 
    e.preventDefault(); 
     started = true; 
     if (started === true) { 
      imageRotator(); 
      started = false; 
      console.log(started); 
     }; 
    }); 

    // imageRotator(); 

    // inspiration: 
    //http://aarontennyson.com/tutorials/demos/slide_show_fade/ 
}); 

的jsfiddle：以上鍊接，更新，包括flag，event件