带有随机起点的jQuery幻灯片

时间:2015-01-24 14:18:15

标签: javascript jquery html random

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

<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. 当页面加载时,创建图像的随机“播放列表”(例如,首次加载页面时,幻灯片按顺序显示图像3,1,0,5,2,4,下次加载时它的顺序不同)。这是为了确保它不会意外地在相同的两个图像之间切换。
  3. 我尝试通过随机包含数字0-5的数组来修复第二个问题,然后将其改组,但我的javascript / jQuery技能很差,我不知道如何继续。任何帮助表示赞赏。

1 个答案:

答案 0 :(得分:1)

This question has a useful shuffle function在接受的答案中,您可以使用它来创建随机播放列表。

然后你可以通过一个简单的计数器循环显示,显示与播放列表中的条目匹配的图像:

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();

Here's a fiddle展示它是如何运作的。我用文字替换了图像以便于测试,我已经切碎并稍微改变了一下。它很粗糙,但希望能够表明这个想法。