随机多个图像旋转器 - 页面刷新时随机显示图像屏幕？答案

【问题标题】：Random Multiple image rotator - display a screen of images randomly when page refreshed?随机多个图像旋转器 - 页面刷新时随机显示图像屏幕？
【发布时间】：2012-03-12 14:34:28
【问题描述】：

我需要多个随机图像旋转器。

我在整个屏幕上有一个包含多个 120px X 100px 徽标的整页，我想要做的是当页面刷新时，徽标会在屏幕上随机旋转，所以一个徽标不会一直在同一个位置.

而且它不能复制标志，因此标志不能在屏幕上重复？

有人可以帮我吗？

我认为它可能就像 jQuery 一样简单，让 div 中的所有徽标都包含在一个类中，然后在刷新时它只是随机混合它们？

我厌倦的每个教程都只考虑屏幕上显示的一个图像！

谢谢

【问题讨论】：

标签： javascript jquery image random rotation

【解决方案1】：

只需使用一些随机数来移动元素。

Javascript 的 Math.random 可以很好地解决这个问题，然后遍历所有图像并在页面加载时稍微移动它们。

这是一个非常简单的例子：

$('.images').each(function() {
    randomElm = $('.images').get(Math.floor(Math.random()*10));
    randomElm.parentNode.insertBefore(this, randomElm);
});

这是FIDDLE

【讨论】：

这听起来很完美，谢谢，但我无法让它在我的网站上运行：-adoogle.co.uk/full-random.html 任何想法为什么？谢谢
有人知道为什么它可能无法与我网站上的代码一起使用吗？当我刷新图像消失，我只是得到加载图标？谢谢
我真的不知道，可能是调用函数时没有加载图像，或者可能是很多其他的东西？该代码只是作为如何选择随机元素的一般示例，您必须使其适合您的特定化妆等。
<script type="text/javascript"> (function($){ $.fn.shuffle = function() { var allElems = this.get(), getRandom = function(max) { return Math.floor(Math.random() * max); }, shuffled = $.map(allElems, function(){ var random = getRandom(allElems.length), randEl = $(allElems[random]).clone(true)[0]; allElems.splice(random, 1); return randEl; }); this.each(function(i){ $(this).replaceWith($(shuffled[i])); }); return $(shuffled); }; })(jQuery); $(function() { $(".images").shuffle(); }); </script>