只是一个简单的问题??关于随机化这个幻灯片

Just a quick simple ?? about randomizing this slideshow

本文关键字：随机化 幻灯片 问题 简单 一个      更新时间：2023-09-26

我有这个幻灯片上的一个网站，我正在建设，它的工作完美，但我想图片随机化。我知道有一个"。"Shuffle"函数，但不知道放在哪里。有人能帮帮我吗?' 

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

您在这里错过了很多上下文(最值得注意的是将幻灯片显示功能添加到#slideshow的脚本)，但是如果您知道有一个"。你要做的就是在你的HTML中找到#slideshow元素并添加class=' Shuffle '。如果它已经有了class属性就在最后一个属性后面加个空格，然后输入shuffle。在将洗牌前的句号添加到HTML中的class属性时，不要包括它。句点只是指定它是CSS/Javascript中用于标识的类。

UPDATE:这是一个基本实现的示例，演示如何对当前拥有的内容进行洗牌。我希望它能帮助您演示如何解决这个问题!让我知道，如果你有任何问题，但本质上你所做的是利用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
)});
相关文章：