jQuery幻灯片-需要随机，但需要以相同的图片开头 [英] jQuery Slideshow - want random but need to start with same image

问题描述

因此，我发现了这张名为Skitter的惊人jQuery幻灯片.这很棒！所以我在我的最新项目中实现了它. 我在@ http://thiagosf.net/projects/jquery/skitter/#documentation

so i found this amazing jQuery slideshow called Skitter. it's awesome! so i implemented it in my latest project. i got it @ http://thiagosf.net/projects/jquery/skitter/#documentation

是否可以(如果这样，我该如何)随机显示图像，但始终以特定图像开头? 例如，假设我希望用户加载页面时显示的第一张图像是带有欢迎消息的特定图像.但是，然后针对该图像之后的每个图像，将其随机化.

Is it possible to (and if so, how do I) have the images be randomly displayed BUT always start with a particular one? For example, say I want the first image that it shows when a user loads the page is a particular one with a welcome message. But then for every image "after" that one, it's randomized.

我的头部有"show_randomly:true"部分，我当前的幻灯片正在成功随机化.我只是希望有一个开始"图像.

I have the "show_randomly: true," part in the head and my current slide is randomizing successfully. I just hope to have a 'start' image.

因此，从其主页上，我进行了自定义功能"，并将其提供给我的代码复制/粘贴到了页面的顶部...

So from its homepage, I did the "Customize Features" and copy/pasted the code it gave me into the head of my page...

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

因此，就像我说的那样，我已经成功运行了幻灯片放映，并且正在随机化图像.只需要一种使它始终从列表中的特定图像开始的方法. 谢谢！！！

So like i said, i have a successful slideshow running and it IS randomizing the images. Just need a way to have it always start with one particular image from the list. THANKS!!!

推荐答案

据我所知，这不是Skitter脚本的功能.但是，您可以轻松添加它.首先打开jquery.skitter.js文件(很难更改您现在正在使用的.min.js文件，以后总是可以将其最小化).

To the best of my knowledge, that isn't a functionality of the Skitter script. However, you can easily add it. Start by opening up the jquery.skitter.js file (it will be hard to make changes to the .min.js file you're using now, and you can always minimize it later on).

找到以下行:

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

然后，要声明一个初始(开始)图像，只需在所需图像的href属性的开头添加[initial]即可.假设您已在脚本选项中启用了show_randomly，以下示例将始终以images/003.jpg开始.

Then, to declare an initial (start) image, simply add [initial] to the beginning of the href attribute of the desired image. The following example will always start off with images/003.jpg, assuming you have show_randomly enabled in the script options.

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

如果您想再次将其最小化，则有几种Internet服务，例如 http://www.minifyjavascript.com ， http://refresh-sf.com/yui 或

If you want to minimize this again, there are several Internet services, such as http://www.minifyjavascript.com, http://refresh-sf.com/yui, or http://jscompress.com.

这篇关于jQuery幻灯片-需要随机，但需要以相同的图片开头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！