我的照片在这样的列表中:
<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
等等。我想要的是
- 随机化起始图像,以便每次页面加载时它都不同。
- 页面加载时,创建一个随机的图像“播放列表”(假设第一次加载页面时,幻灯片按该顺序显示图像 3, 1, 0, 5, 2, 4,下次加载时会以不同的顺序显示) )。这是为了确保它不会意外地在相同的两个图像之间切换。
我尝试通过随机包含数字 0-5 的数组然后对其进行洗牌来解决第二个问题,但我的 javascript/jQuery 技能非常差,我不知道如何继续。如有任何帮助,我们将不胜感激。
最佳答案
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展示它是如何工作的。为了更容易测试,我用文本替换了图像,并且我对它进行了一些修改。虽然很粗糙,但希望能展示这个想法。
关于javascript - 带有随机起点的 jQuery 幻灯片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28126419/