Javascript jQuery幻灯片-想要随机播放，但需要从相同的图像开始

所以我找到了一个叫Skitter的jQuery幻灯片。太棒了！所以我在我的最新项目中实现了它。 我明白了@

是否可以（如果可以，我如何）随机显示图像，但始终从特定图像开始？ 例如，假设我希望在用户加载页面时显示的第一个图像是带有欢迎消息的特定图像。但对于“之后”的每一张图像，它都是随机的

我的头上有“show_random: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>

$（文档）.ready（函数（）{
$（“.box\u skitter\u large”）.skitter({
动画：“随机智能”，
点：是的，
预览：对，
控制位置：“中心”，
数字对齐：“右”，
藏身处：没错，
随机显示：正确，
控制：对，
间隔时间：5000，
速度：0.5，
});
});

正如我所说，我成功地进行了幻灯片放映，它将图像随机化。只需要一种方法，让它总是从列表中的一个特定图像开始。

---

谢谢

据我所知，这不是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属性的开头。以下示例将始终以images/003.jpg开始，假设您已在脚本选项中随机启用show_

<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>

立方体

立方

挡块

立方顶

立方边

立方化

---

如果你想再次最小化这一点，有几种互联网服务，例如，或。

神圣的蝙蝠侠！！！伙计，你太棒了。谢谢谢谢谢谢谢谢谢谢谢谢！！！我总是对这个网站上人们的善意感到惊讶和惊讶。我迫不及待想（今晚）试试这个。你的好意使我哑口无言。