1

だから私はSkitterと呼ばれるこの素晴らしいjQueryスライドショーを見つけました。それは素晴らしいです！だから私はそれを私の最新のプロジェクトに実装しました。私はそれを@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>

だから私が言ったように、私は成功したスライドショーを実行していて、それは画像をランダム化しています。リストから特定の1つの画像で常に開始する方法が必要です。ありがとう！！！

4

1 に答える 1

2

私の知る限り、これはスキッタースクリプトの機能ではありません。ただし、簡単に追加できます。ファイルを開くことから始め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などのいくつかのインターネットサービスがあります。

于 2012-08-19T20:39:19.487 に答える