jquery - 在 jQuery 中循环图像 - 随机化它?

标签 jquery css jquery-cycle

我有一个网站有一个包含一些图像的 div:

 <div class="slideshow">
            <img src="lib/images/grid/slideshow/a-960x305/a_pic1.jpg" width="960" height="305" alt="1" class="first" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic2.jpg" width="960" height="305" alt="2" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic3.jpg" width="960" height="305" alt="3" />
            <img src="lib/images/grid/slideshow/a-960x305/a_pic4.jpg" width="960" height="305" alt="4" />
  </div>

注意第一张图片有一个名为 first 的类名。这样页面通过 css 一次只显示一张图片:

这是 CSS:

/*begin slideshow*/
div.slideshow                              { margin:0 0 5px 0; /*height:305px;*/ } /*for the jQuery cycle plug in*/
div.slideshow img                          { display:none;}
div.slideshow img.first                    { display:block;}
.caption                                   { text-align:center; font-weight:bold; color:#1F7FB6;}
/*end slideshow*/

我正在使用 jquery 循环库来循环浏览图像,如下所示:

 <script type="text/javascript">
        $(document).ready(function () {
            $('.slideshow').cycle({
                fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
                timeout: 7000,
                after: function () {
                    $('.caption').html(this.alt);
                }
            });
        });
    </script>

问题是页面当然总是从第一张图片开始,有没有办法随机化一点,这样它就可以开始随机图片而不是总是从 a_pic1.jpg 开始?

最佳答案

在 jQuery 循环中将 random 设置为 1 options

random: 0, // true for random, false for sequence (not applicable to shuffle fx)

$(document).ready(function () {
    $('.slideshow').cycle({
        fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
        timeout: 7000,
        after: function () {
            $('.caption').html(this.alt);
        },
        random: 1 // <-- add this
    });
});

关于jquery - 在 jQuery 中循环图像 - 随机化它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7081506/

相关文章:

javascript - 有什么方法可以查看代码的哪一部分使网页速度变慢?

jQuery 验证插件 - showErrors 选项 - errorContainer 未取消隐藏/显示

jquery - IE 8 及以下版本不会触发点击显示为 : none; Any workaround? 的元素

html - 如何将循环设计和 colorbox 插件中的图像居中到网页的中心

javascript - (脚本 438 错误)我的 jQuery 插件在 Internet Explorer 中无法工作

php - 当选择是数组时,根据另一个选择框填充一个选择框

jquery - 错误 TS2304 : cannot find $ in angular 5 component

html - 图像上的 Safari 绝对位置问题

html - CSS - IE 中的填充问题?

jquery - 如何检查 jQuery Cycle 幻灯片是否终止并显示此日志 "[cycle] terminating; too few slides: 1 "