jQuery幻燈片 - 想隨機，但需要從相同的圖像開始

Question

所以我發現這個驚人的jQuery幻燈片稱爲Skitter。這很棒！所以我在我的最新項目中實現了它。 我明白了@http://thiagosf.net/projects/jquery/skitter/#documentation

是否有可能（如果是這樣，我該如何）隨機顯示圖像但總是從一個特定的開始？ 例如，假設我想讓用戶加載頁面時顯示的第一個圖像是一個特定的圖像，並帶有歡迎消息。但對於每個「之後」的圖像，它都是隨機的。

我頭上有「show_randomly：true」部分，我目前的幻燈片是成功的隨機化。我只是希望有一個'開始'的形象。

從它的主頁

所以，我做了「自定義功能」和複製/粘貼它給了我進入我的頁面頭部的代碼...

<!-- CSS --> 
<link type="text/css" href="scripts/SkitterSlideshow/css/skitter.styles.css" 
     media="all" rel="stylesheet" /> 

<!-- JS --> 
<script type="text/javascript" 
     src="scripts/SkitterSlideshow/js/jquery-1.6.3.min.js"></script> 
<script type="text/javascript" 
     src="scripts/SkitterSlideshow/js/jquery.easing.1.3.js"></script> 
<script type="text/javascript" 
     src="scripts/SkitterSlideshow/js/jquery.animate-colors-min.js"></script> 
<script type="text/javascript" 
     src="scripts/SkitterSlideshow/js/jquery.skitter.min.js"></script> 

<!-- Init Plugin --> 
<script> 
     $(document).ready(function() { 
      $(".box_skitter_large").skitter({ 
       animation: "randomSmart", 
       dots: true, 
       preview: true, 
       controls_position: "center", 
       numbers_align: "right", 
       hideTools: true, 
       show_randomly: true, 
       controls: true, 
       interval: 5000, 
       velocity: 0.5, 
      }); 
     }); 
</script> 

所以就像我說的，我有一個成功的幻燈片放映正在運行，它隨機化圖像。只需要一種方法，讓它始終從列表中的一個特定圖像開始。 謝謝！

Answer 1

據我所知，這不是Skitter腳本的功能。但是，您可以輕鬆地添加它。首先打開jquery.skitter.js文件（很難對現在使用的.min.js文件進行更改，並且以後可以隨時將其最小化）。

查找以下行：

if (this.settings.show_randomly) this.settings.images_links.sort(function(a,b) { 
    return Math.random() - 0.5; 
}); 

後，立即補充一點：

/* START INITIAL FIXED IMAGE MOD */ 
if (this.settings.show_randomly) { /* Only use a fixed initial image if show_randomly is enabled */ 

    /* The following function is used to move an item in an array from fromIndex to toIndex */ 
    Array.prototype.move = function(fromIndex, toIndex) { 
     this.splice(toIndex, 0, this.splice(fromIndex, 1)[0]); 
    }; 

    initialIndex = 0; 

    /* The following function finds the desired initial image and stores it's location */ 
    $.each(this.settings.images_links, function(index, item) { 
     if (item[1].slice(0,9) == "[initial]") initialIndex = index; 
    }); 

    this.settings.images_links[initialIndex][1].replace("[initial]", ""); /* Removes the [initial] tag so the link works properly */ 
    this.settings.images_links.move(initialIndex, 0); /* Move it to the front of the array so it's displayed first */ 
} 
/* END INITIAL FIXED IMAGE MOD */ 

然後，宣佈初始（開始）的圖像，只需添加[initial]到HREF的開始所需圖像的屬性。假設您在腳本選項中啓用了show_randomly，以下示例總是以images/003.jpg開頭。

<div class="box_skitter box_skitter_large"> 
    <ul> 
     <li><a href="#cube"><img src="images/001.jpg" class="cube" /></a><div class="label_text"><p>cube</p></div></li> 
     <li><a href="#cubeRandom"><img src="images/002.jpg" class="cubeRandom" /></a><div class="label_text"><p>cubeRandom</p></div></li> 
     <li><a href="[initial]#block"><img src="images/003.jpg" class="block" /></a><div class="label_text"><p>block</p></div></li> 
     <li><a href="#cubeStop"><img src="images/004.jpg" class="cubeStop" /></a><div class="label_text"><p>cubeStop</p></div></li> 
     <li><a href="#cubeHide"><img src="images/005.jpg" class="cubeHide" /></a><div class="label_text"><p>cubeHide</p></div></li> 
     <li><a href="#cubeSize"><img src="images/006.jpg" class="cubeSize" /></a><div class="label_text"><p>cubeSize</p></div></li> 
    </ul> 
</div> 

如果你想再次最小化這一點，有幾個互聯網服務，如http://www.minifyjavascript.com，http://refresh-sf.com/yui，或http://jscompress.com。