javascript - jquery 将元素移动到随机顺序

Question

我试图以随机顺序显示一系列图像。但是，在显示所有项目之前，我不希望重复任何单个项目，因此我不想从数组中选择随机图像，而是想获取整个数组，将其随机化，然后从第一个到第二个按顺序选择最后一个元素。这是我的代码:

HTML:

<div id="tout4"
<img src="images/gallery01.jpg" class="img_lg"/>
<img src="images/gallery02.jpg" class="img_lg"/>
<img src="images/gallery03.jpg" class="img_lg"/>
</div>

和当前按顺序选择和显示项目的 javascript:

var galleryLength = $('#tout4 img.img_lg').length;
var currentGallery = 0;
setInterval(cycleGallery, 5000);


function cycleGallery(){

    $('#tout4 img.img_lg').eq(currentGallery).fadeOut(300);

    if (currentGallery < (galleryLength-1)){
        currentGallery++;
    } else {
        currentGallery = 0;
    }

    $('#tout4 img.img_lg').eq(currentGallery).fadeIn(300);
}

那么我该如何重新排列图像的实际顺序，而不仅仅是它们被选中的顺序？

Answer 1

经过多次探索，我决定采用 fisher-yates 算法并将其与 jquery 一起应用，而无需克隆等。

$('#tout4 img.img_lg').shuffle();

/*
* Shuffle jQuery array of elements - see Fisher-Yates algorithm
*/
jQuery.fn.shuffle = function () {
    var j;
    for (var i = 0; i < this.length; i++) {
        j = Math.floor(Math.random() * this.length);
        $(this[i]).before($(this[j]));
    }
    return this;
};