Javascript幻灯片与随机第一张图片？

我正在尝试设置这个幻灯片脚本，以便显示的第一张图片是随机的（我需要第一张图片是一个不同的/随机的幻灯片，每次我们去网站），其余的图片可以显示在正确的顺序，这很好

我正在使用Jon Raasch的简单jquery幻灯片脚本，如下所示：

<script type="text/javascript">
function slideSwitch() {
    var $active = $('#slideshow DIV.active');
    if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    setInterval( "slideSwitch()", 2500 );
});
</script>

<div id="slideshow">
<div class="active"><img src="images/slide1.jpg"></div>
<div><img src="images/slide2.jpg"></div>
<div><img src="images/slide3.jpg"></div>
<div><img src="images/slide4.jpg"></div>
<div><img src="images/slide5.jpg"></div>
</div>

我尝试过一些东西，但javascript确实不是我喜欢的（“设计师思维”），我尝试过的东西也不起作用。有什么想法吗

非常感谢

类似这样：

$(function() {
    var slides, index, current, last, last_index;
    slides = $('#slideshow div');
    // initialize index randomly
    index = Math.floor(Math.rand() * slides.length);
    // do a % trick to get index - 1 looping
    last_index = (index + slides.length - 1) % slides.length;
    last = slices[last_index]; // initialize last

    function slideSwitch() {
        current = slides[index];
        index = (index + 1) % slides.length; // % to loop
        current.addClass("active");
        last.addClass("last-active");
        current.css({ "opacity": 0.0 })
            .animate({ "opacity": 1.0}, 1000, function() {
                current.removeClass("active");
                last.addClass("active");
                last.removeClass("last-active");
                last = current;
            });
    }
    setInterval(slideSwitch, 2500);
    slideShow(); // run once now, because interval doesn't run until 2500ms
});

---

从HTML中删除活动类，然后使用以下代码对其进行初始设置，方法是更改此行并调整CSS，以便在JS运行之前不显示幻灯片：

if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

为此：

if ( $active.length == 0 ) {
    var slides = $('#slideshow DIV');
    $active = slides.eq(Math.floor(Math.random() * slides.length));
}

---

工作演示：

根据jfriend00的回答，您需要将脚本设置为：

 function slideSwitch() {
    var $active = $('#slideshow div.active');
    if ( $active.length == 0 ) {
    var slides = $('#slideshow div');
    $active = slides.eq(Math.floor(Math.random() * slides.length));
}
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    slideSwitch();
    setInterval( function(){slideSwitch()}, 2500 );
});

出现了一些语法错误，我不得不更改setInterval的调用方式

---

工作小提琴：

谢谢您的帮助！很遗憾，你的代码不起作用。。。它只是没有显示任何东西。我修复了“#slideshow DIV”（您一定输入错误），但显然它仍然不起作用…@live2create-然后，也许您的问题不清楚。如果您按照我的说明使所有幻灯片最初都不可见，请删除开头的

class=“active”“

从HTML中插入此代码，然后使幻灯片显示在您运行第一段代码后，此代码将随机选择起始点。我以为这就是你想要的。如果您想在实现方面获得更多帮助，我建议您在JSFIDLE中创建一个工作示例，这样我们就可以看到您在实现中的错误所在。谢谢jfriend00，就像我说的Javascript不是我喜欢的。我按照您的建议创建了一个JSFIDLE，请看一看：您可以看到它没有显示任何内容。下面是供您比较的原始版本（没有您建议的更改）：@live2create-关于javascript，您需要了解的第一件事是在错误控制台或调试控制台中查找脚本错误。这将为你节省大量的时间。我的答案有一个输入错误（一个额外的参数），而你的答案有一个错误。它们在这里都被更正了：而且很有效。非常感谢您的帮助！不幸的是，代码不起作用。。。它只显示了第一张幻灯片，但什么也没发生。谢谢！事实上，您的脚本可以工作，但只在JSFIDLE中工作，尽管我知道了原因。我需要让脚本“onLoad”工作，至少这是jsFiddle中使其工作的选项。您能告诉我如何使用脚本实现这一点吗？无论JSFIDLE onLoad选项如何，它都适用于我。你能把小提琴的版本贴在没有的地方吗？文档准备就绪时已调用setInterval，有关详细信息，请参阅。别担心！谢谢你指出这一点。我是一个比我想象的更糟糕的javascript程序员。你知道如何让第一张幻灯片看起来更快吗？现在，它是空白的（全是白色的），显然它似乎在等待2500毫秒过去，然后第一张随机图片出现，然后幻灯片随之出现。我想这是因为setInterval函数。如何在不等待设置间隔的情况下加载第一张图片？编辑了上面的答案，只需立即调用slideSwitch（）函数。我应该早点想到这一点，现在我们不是从一张活跃的图片开始。

 function slideSwitch() {
    var $active = $('#slideshow div.active');
    if ( $active.length == 0 ) {
    var slides = $('#slideshow div');
    $active = slides.eq(Math.floor(Math.random() * slides.length));
}
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow div:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });
}
$(function() {
    slideSwitch();
    setInterval( function(){slideSwitch()}, 2500 );
});