1

私はこれらのコードで画像のスライドショーを持っています：-

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>

これらのスクリプトはうまく機能しています。しかし、私はランダムな順序で画像を表示したいと思います。そのためにスクリプトを変更する方法。または、他のスクリプトを使用する必要がありますか？plzは私を助けます...ありがとう

4

2 に答える 2

3

乱数が長さよりも大きい場合は、 random（）を使用して画像配列のランダムインデックスを生成し、それを画像配列に設定できlength-1ます。

$(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() {
        current = Math.floor((Math.random()*imgAmount)+1);
    if(current > imgAmount-1) current = imgAmount -2;
    var $currentImg = $($imgs[current]);       
    var $nextImg = $($imgs[current+1]),
        speed = 1500;
    // animation speed should be the same for both images so we have a smooth change
    $currentImg.fadeOut(speed);
    $nextImg.fadeIn(speed);

    }
});
于 2013-03-21T05:59:58.943 に答える
3

とった。コードの一部を更新して、よりクリーンにしました。：hiddenや：visibleなどの楽しいセレクターを使用します。彼らは本当に素晴らしいです。

これがフィドルです：

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);
}
});
于 2013-03-21T06:22:52.693 に答える