javascript - 在加载/刷新时显示不同的图像

我目前正在为我的项目使用Jquery Cycle插件，并且幻灯片运行顺利。但是，我希望我的幻灯片在每次刷新页面时显示或以不同的图像开头。我不确定如何添加功能/脚本来实现这一目标，或者不确定是否可行。我是JQuery新手，所以将不胜感激！

脚本：

$(document).ready(function() {
    $('.slideshow').cycle({
         fx: 'fade',
         speed: 2500,
         timeout: 7000,
         prev: '#prev',
         next: '#next',
    });
});

我的HTML：

<div class="slideshow">
    <img src="images/img_slide-1.jpg" />
    <img src="images/img_slide-2.jpg" />
    <img src="images/img_slide-3.jpg" />
</div>

最佳答案

使用startingslide选项

startingSlide: 0,     // zero-based index of the first slide to be displayed

要选择随机幻灯片，您需要获取像这样的随机索引

var rand = Math.floor(Math.random() * $('.slideshow img').length);

然后，当您初始化循环时，使用rand变量作为起始幻灯片。

$(document).ready(function() {
  var rand = Math.floor(Math.random() * $('.slideshow img').length);
  $('.slideshow').cycle({
    fx: 'fade',
    speed: 2500,
    timeout: 7000,
    prev: '#prev',
    next: '#next',
    startingSlide: rand
  });
});

关于javascript - 在加载/刷新时显示不同的图像，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/12575688/