Я пытаюсь показать несколько случайных изображений в div. Мой HTML-код выглядит следующим образом:
<div class="sponsors">
<div id="sponsorsContent">
<div class="spacer"></div>
<div class="sponsorSlide" id="imgageSlide_1">
<img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_1.jpg" /><br />
<span class="thumbnail-text">Image Text</span>
</div>
<div class="spacer"></div>
<div class="sponsorSlide" id="imgageSlide_2">
<img alt="" src="<?php echo $this->baseUrl(); ?>/img/Sponsors/img_2.jpg" /><br />
<span class="thumbnail-text">Image Text</span>
</div> ... </div></div>
Я пытаюсь сначала перемешать div-ы "спонсорSlide", а затем выбрать 7 из них случайным образом.Я хочу показать это с помощью fadeIn и fadeOut. Обычно я пробую этот код:
$('#sponsorsContent').addClass('horizontal');
$('#sponsorsContent div').addClass('hidden').removeClass('visible');
$('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden');
setInterval(function(){
$('#sponsorsContent').fadeOut(500);
$('#sponsorsContent .sponsorSlide').delay(500).addClass('hidden').removeClass('visible').shuffle();
$('#sponsorsContent .sponsorSlide').rand(7).removeClass('hidden').addClass('visible');
$('#sponsorsContent').fadeIn(1500);
}, 5000);
Основная проблема в том, что когда код запускается, незадолго до того, как div исчезнет, вы можете увидеть, что изображения меняются! Но я хочу рандомизировать их, когда они не видны! Я использовал разные способы:
К вашему сведению, я пытаюсь придумать такую концепцию:
1 - показ некоторых случайных изображений 2- исчезновение 3- перемешать изображения 4- Выберите 7 случайных div 5- исчезать 6- go 2
Кто-нибудь знает, в чем моя главная ошибка? Я что-то делаю не так? Я запуталась и очень хочу узнать, какой способ мне попробовать и как сделать так, чтобы он работал так, как я хочу?
ps: Он работает без увлечений! Но мне нужно, чтобы они появлялись и исчезали.