jquery 将元素移动到随机顺序

问题描述

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

HTML:

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

var galleryLength = $('#tout4 img.img_lg').length;var currentGallery = 0;setInterval(cycleGallery, 5000);函数循环画廊(){$('#tout4 img.img_lg').eq(currentGallery).fadeOut(300);if (currentGallery < (galleryLength-1)){当前画廊++；} 别的 {当前画廊 = 0;}$('#tout4 img.img_lg').eq(currentGallery).fadeIn(300);}

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

解决方案

最终使用了这个(感谢 Blair！)-

/*** jQuery Shuffle (/web/20120307220753/http://mktgdept.com/jquery-shuffle)* 用于对一组元素进行混洗的 jQuery 插件** v0.0.1 - 2009 年 11 月 13 日** 版权所有 (c) 2009 Chad Smith (/web/20120307220753/http://twitter.com/chadsmith)* 在 MIT 和 GPL 许可下获得双重许可.*/web/20120307220753/http://www.opensource.org/licenses/mit-license.php*/web/20120307220753/http://www.opensource.org/licenses/gpl-license.php** 使用:$(selector).shuffle() 或 $.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();

I am attempting to display a series of images in a random order. However, I do not want any single item to repeat until all items have been shown, so instead of selecting a random image from the array, I want to take the entire array, randomize it, and then select in sequence from the first to the last element. Here's my code:

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>

and the javascript, which currently selects and displays the items in order:

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

So how do I rearrange the actual order of the images, and not just the order in which they are selected?

解决方案

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

So then the only additions that need to be made to the above code are to include the script, and call the shuffle function:

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

这篇关于jquery 将元素移动到随机顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！