具有随机起点的jQuery幻灯片

jQuery slideshow with random startpoint

本文关键字：jQuery 幻灯片 起点 随机      更新时间：2023-09-26

我的照片在这样的列表中：

<ul class="slideshow">
    <li><img src="images/slideshow/slide0.jpg" alt="" /></li>
    <li><img src="images/slideshow/slide1.jpg" alt="" /></li>
    <li><img src="images/slideshow/slide2.jpg" alt="" /></li>
    <li><img src="images/slideshow/slide3.jpg" alt="" /></li>
    <li><img src="images/slideshow/slide4.jpg" alt="" /></li>
    <li><img src="images/slideshow/slide5.jpg" alt="" /></li>
</ul>

这是我的脚本：

$(function () {
var duration = 6000;    
var speed = 700;
var slideshow = $(".slideshow");
var pictures = slideshow.children('li');
var length = pictures.length;
i = 0;
j = 0;
slidePicture = function () {
    pictures.eq(i).fadeOut(speed, function () {
        while(i == j) {
            i = Math.floor(Math.random() * length); 
        }
        pictures.eq(i).fadeIn(speed);
        j = i;
    });
};  
pictures.not(':first').hide();
setInterval(slidePicture, duration);    
});

现在，此脚本始终首先显示相同的图像。它不能连续两次显示相同的图像，但它可以显示slide0.jpg，然后slide1.jpg，然后再次显示slide0.jpg，依此类推。我想要的是

  1. 随机化起始图像，使其每次加载都不同。
    2. 当页面加载时，
  2. 创建一个随机的图像"播放列表"（例如第一次加载页面时，幻灯片以该顺序显示图像 3、1、0、5、2、4，下次加载时是不同的顺序）。这是为了确保它不会意外地在相同的两个图像之间切换。

我尝试通过随机发送一个包含数字 0-5 的数组然后对其进行洗牌来解决第二个问题，但我的 javascript/jQuery 技能非常差，我不确定如何继续。任何帮助，不胜感激。

这个问题在

接受的答案中有一个有用的随机播放功能，您可以使用它来创建随机播放列表。

然后，您可以使用一个简单的计数器循环播放，显示与播放列表中该条目匹配的图像：

for(n = 0; n <= length; n++) {
    playList.push(n);
}
playList = shuffle(playList);
slidePicture = function () {
    $('.slideshow li').eq(playList[i]).fadeOut(speed, function () {
        var next = (i >= length) ? 0 : i + 1;
        $('.slideshow li').eq(playList[next]).fadeIn(speed);
        i = next;
    });
};

对于1.您可以隐藏所有内容并显示与播放列表中第一个条目相对应的图片：

$('.slideshow li').hide();
$('.slideshow li').eq(playList[i]).show();

这是一个小提琴，展示了它是如何工作的。为了便于测试，我用文本替换了图像，并且我对其进行了一点切碎和更改。这很粗糙，但希望能表明这个想法。

相关文章：