Question

我有一个简单的Jquery幻灯片，一个接一个地淡化图像列表。

<script type="text/javascript">

$(function(){
    $('.fadein img:gt(0)').hide();
setInterval(function(){
  $('.fadein :first-child').fadeOut(3000)
     .next('img').fadeIn(3000)
     .end().appendTo('.fadein');}, 
  3000);
});
</script>

我现在要做的是让它们随机化。由于此幻灯片显示在我页面的标题中，因此每次用户导航到其他页面时幻灯片都会从头开始。

我想让它以随机顺序显示。

任何帮助都会很棒！

Answer 1

尝试使用此逻辑

<body onload="document.body.background = '/images/img'+Math.floor(Math.random()*4)+'.jpg';" />

或尝试使用此功能

$.fn.randomImage = function (){
var $imageNumber = 8, 
// Set the amount of images in the Sprite
$height = $('> div', this).innerHeight(),
$random_num = Math.random() * $imageNumber - 1,
$multiple = Math.round($random_num),
$random = $height * $multiple
jQuery('.image').css( 
{'background-position' : '0px -' + $random + 'px',  'display' : 'block' } 
)};

然后

jQuery('#image-container').randomImage();

参考

random images
another

Answer 2

我在http://yelotofu.com/labs/jquery/snippets/shuffle/jquery.shuffle.js找到的jQuery插件可能会做的伎俩。它会随机播放所有选定的元素。这里还有一个演示：http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html。

用法类似于$('#imagediv').shuffle();

Jquery幻灯片加载随机随机图像顺序

2 个答案: