jquery将元素移动到随机顺序中 [英] jquery move elements into a random order
问题描述
我试图以随机顺序显示一系列图像。但是,我不希望任何单个项目重复,直到所有项目都被显示,所以我不想从数组中选择一个随机图像,而是取整个数组,随机化它,然后从第一个到第一个顺序选择最后一个元素这是我的代码:
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>
和javascript,目前按顺序选择并显示项目:
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?
推荐答案
结束使用此(感谢Blair!) -
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函数:
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将元素移动到随机顺序中的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!