Question

嘿伙计们，我目前正在为我的项目使用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>

Answer 1

对这个插件进行一些快速研究（之前从未使用过它），看起来有一个随机选项可以指定为true。看看文档：{{3}}（只是ctrl-f代表“随机”）。

如果您只是从随机的第一张图片中查看，那么之后的顺序幻灯片（如评论中所述），只需使用startingSlide：SLIDE_NUMBER_HERE，它应该有效，基于对文档的最少研究。

Answer 2

使用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
  });
});

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

2 个答案: