jquery перемещать элементы в случайном порядке - PullRequest
Новая
       17

jquery перемещать элементы в случайном порядке

8 голосов
/ 16 марта 2011

Я пытаюсь отобразить серию изображений в случайном порядке. Однако я не хочу, чтобы какой-либо один элемент повторялся до тех пор, пока не будут показаны все элементы, поэтому вместо выбора случайного изображения из массива я хочу взять весь массив, рандомизировать его, а затем последовательно выбирать от первого до последний элемент. Вот мой код:

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

Так, как мне изменить фактический порядок изображений, а не только порядок, в котором они выбраны?

Ответы [ 4 ]

14 голосов
/ 27 марта 2013

После долгих исследований я решил взять алгоритм 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;
};
8 голосов
/ 22 августа 2011

Вы также можете использовать общий рандомизированный сортировщик JavaScript Array , также прокомментированный здесь и здесь : 

$('<my selector>').sort( function(){ return ( Math.round( Math.random() ) - 0.5 ) } );
5 голосов
/ 16 марта 2011

Заканчивается на этом (спасибо, Блэр!) - 

/**
 * 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();
0 голосов
/ 29 октября 2013 
<!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, который дает в половине случаев положительное число и в половине случаев отрицательное число. Таким образом, сортировка пар происходит либо по возрастанию, либо по убыванию, что приводит к случайному распределению элементов массива.

...