jQuery将元素移动到随机顺序

Question

jQuery将元素移动到随机顺序

10

我将尝试以随机顺序显示一系列图片。然而，我不希望任何单个项目重复出现，直到所有项目都被展示，因此我不想从数组中选择随机图像，而是要取整个数组，随机排列，然后按顺序从第一个元素选择到最后一个元素。以下是我的代码：

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

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

- mheavers

那么你的实际问题是什么？ - Alnitak

谷歌搜索JavaScript洗牌 - Blair McMillan

请尝试此帖子中提供的函数：https://dev59.com/WHNA5IYBdhLWcg3wcNXF#962890 - Reid

5个回答

8

你也可以使用常见的JavaScript 数组随机排序器，也在这里和这里进行了评论。

$('<my selector>').sort( function(){ return ( Math.round( Math.random() ) - 0.5 ) } );

- fguillen

7

Ended up using this (thanks Blair!) -

/**
 * jQuery Shuffle (/web/20120307220753/http://mktgdept.com/jquery-shuffle)
 * A jQuery plugin for shuffling a set of elements
 *
 * v0.0.1 - 13 November 2009
 *
 * Copyright (c) 2009 Chad Smith (/web/20120307220753/http://twitter.com/chadsmith)
 * Dual licensed under the MIT and GPL licenses.
 * /web/20120307220753/http://www.opensource.org/licenses/mit-license.php
 * /web/20120307220753/http://www.opensource.org/licenses/gpl-license.php
 *
 * Shuffle elements using: $(selector).shuffle() or $.shuffle(selector)
 *
 **/
(function(d){d.fn.shuffle=function(c){c=[];return this.each(function(){c.push(d(this).clone(true))}).each(function(a,b){d(b).replaceWith(c[a=Math.floor(Math.random()*c.length)]);c.splice(a,1)})};d.shuffle=function(a){return d(a).shuffle()}})(jQuery);

所以，需要添加到以上代码的唯一内容是包含脚本并调用shuffle函数：

<script type="text/javascript" src="js/jquery-shuffle.js"></script>
$('#tout4 img.img_lg').shuffle();

- mheavers

0

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click the button to sort the array.</p>

<button onclick="myFunction()">Try it</button>

<script>
  function myFunction()
  {
    var points = [40,100,1,5,25,10];
    points.sort(function(a,b){return (Math.random()-0.5)});
    var x=document.getElementById("demo");
    x.innerHTML=points;
  }
</script>

</body>
</html>

解释：通常情况下，你可以使用"return (a-b)"来得到升序排列的正数；或者你可以使用"return (b-a)"来得到降序排列的负数。

在这里，我们使用Math.random()-0.5，它在一半的情况下会给出一个正数，在另一半情况下会给出一个负数。因此，对于一组数据，排序可以是升序或降序，从而产生数组元素的随机分布。

- Stefan Gruenwald

0

jQuery的简短版本：

$('#tout4>').map(function(i,t) {
     var s=$(t).siblings();
     s.eq(Math.round(s.length*Math.random())).after(t)
})

- Dieter Bender

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chad steele · Accepted Answer

经过深入探索，我决定采用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;
};