Слайд-шоу Jquery загружает случайный порядок изображений

#javascript #jquery #random #slideshow

#javascript #jquery #Случайный #слайд-шоу

Вопрос:

У меня есть простое слайд-шоу 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>

Что я хочу сделать сейчас, так это сделать их рандомизированными. Поскольку это слайд-шоу находится в заголовке моей страницы, каждый раз, когда пользователь переходит на другую страницу, слайд-шоу начинается с самого начала.

Я хочу сделать так, чтобы изображения отображались в случайном порядке.

Любая помощь была бы отличной!

Ответ №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();

Ссылка

случайные изображения
другой

Ответ №2:

Плагин jQuery, который я нашел наhttp://yelotofu.com/labs/jquery/snippets/shuffle/jquery.shuffle.js может сработать. Все выбранные элементы перемешиваются. Здесь также есть демонстрация:http://yelotofu.com/labs/jquery/snippets/shuffle/demo.html .

Использование похоже $('#imagediv').shuffle();