jquery - 使用 jQuery 的随机图像幻灯片

Question

我有带这些代码的图片幻灯片:-

Jquery:-

$(function() {
var current = 0,

    $imgs = jQuery('#header .abc71');
    imgAmount = $imgs.length;

$($imgs.css('position', 'absolute').hide().get(0)).show();


window.setInterval(swapImages, 4000);

function swapImages() {
    var $currentImg = $($imgs[current]);
    if(current == imgAmount-1) current = -1;
    var $nextImg = $($imgs[++current]),
        speed = 1500;
    // animation speed should be the same for both images so we have a smooth change
    $currentImg.fadeOut(speed);
    $nextImg.fadeIn(speed);
    }
});

html:-

<div id="header">
   <img class="abc71" src="img1.png"/>
   <img class="abc71" src="img2.png" />
   <img class="abc71" src="img3.png"/>
 </div>

这些脚本运行良好。但我想以随机顺序显示图像。我如何为此修改我的脚本。还是我应该使用任何其他脚本？请帮助我...谢谢

Answer 1

明白了。我更新了您的一些代码以使其更清晰。使用像 :hidden 和 :visible 这样有趣的选择器。他们真的很棒。

这是 fiddle :

JSFiddle

$(function () {
var current = 0,

$imgs = jQuery('#header .abc71');
imgAmount = $imgs.length;

$($imgs.css('position', 'absolute').hide().get(0)).show();


window.setInterval(swapImages, 1000);

function swapImages() {

    var $currentImg = $('.abc71:visible');

    var $nextImg = $('.abc71:hidden').eq(Math.floor(Math.random() * $('.abc71:hidden').length));
        speed = 500;
    // animation speed should be the same for both images so we have a smooth change
    $currentImg.fadeOut(speed);
    $nextImg.fadeIn(speed);
}
});