Question

我在我正在建设的网站上播放这个幻灯片，它完美无缺，但我想让这些图片随机化。我知道有一个“.shuffle”函数，但不知道在哪里放置它。有人可以帮忙吗？“

$(document).ready(function(){
    $("#slideshow > div:gt(0)").hide();
    setInterval(function() { 
        $('#slideshow > div:first')
            .fadeOut(1000)
            .next()
            .fadeIn(1000)
            .end()
            .appendTo('#slideshow');
    },  3000);
});

Answer 1

你在这里缺少很多上下文（最值得注意的是将幻灯片功能添加到#slideshow的脚本），但是如果你知道你正在使用的库中有一个“.shuffle”类，那就是你想要的do会转到你的html中的“#slideshow”元素并添加“class ='shuffle'”。如果它已经有一个class属性，只需在最后一个之后放一个空格并将shuffle放在那里。当您将其添加到HTML中的class属性时，不要包括shuffle之前的句点。句点只是指定它是CSS / Javascript中的标识类。

更新：Here is a jsfiddle基本实现了如何改变您现有的内容。我希望它有助于展示你可以做些什么来解决这个问题！如果您有任何疑问，请告诉我，但基本上您要做的是使用jqueries'eq'选择器，它允许您在元素中选择div（在您的情况下为#slideshow）。然后你只需使用javascript来为它提供一个随机数，该数字只能达到元素中div数量的长度 - 1（如果该部分没有意义，则查找基于零的索引）。关于如何随机选择同一张幻灯片连续两次处理它有一些非常简化的逻辑：

$(document).ready(function(){
    $("#slideshow > div:gt(0)").hide();
    $slideCount = $("#slideshow > div").length;
    $('#slideshow > div:first').fadeOut(2500);

    setInterval(function() { 
        $firstSlideChosen = Math.floor((Math.random() * $slideCount));
        $('#slideshow > div').eq($firstSlideChosen).show();
        $('#slideshow > div').eq($firstSlideChosen)
            .fadeOut(2500);

        $nextSlide = Math.floor((Math.random() * $slideCount));
        if($nextSlide == $firstSlideChosen){
            if($nextSlide < ($slideCount - 1)) { //if it is not the last in the divs inside of #slideshow
                    $nextSlide++;
                }else{ //it chose the last one so we can only go back
                    $nextSlide--;
                }
        }
        $('#slideshow > div').eq($nextSlide)
                .fadeOut(2500);

    }, 5000
)});

只是一个简单的？关于随机播放此幻灯片

1 个答案: