jQuery случайным образом постепенно появляется изображения
быстро вы можете сделать это с помощью JS на list-replace
4 ответа
попробуйте это
<script type="text/javascript">
//generate random number
var randomnumber=Math.floor(Math.random()*$("#container").children().length);
$(function() {
//hide all the images (if not already done)
$("#container > img").hide();
//set timeout for image to appear (set at 500ms)
setTimeout(function(){
//fade in the random index of the image collection
$("#container > img:eq(" + randomnumber + ")").fadeIn();
}, 500);
});
</script>
присвоить каждому изображению идентификатор с числовым шаблоном, а затем затемнить изображение со случайным сгенерированным идентификатором, используя math.random из javascript
function getImage(minim,maxim) {
return "img" + Math.round(Math.random()*(maxim-minim)+minim);
}
Это не ясно (для меня), хотите ли вы начать плавное исчезновение через полсекунды или исчезновение через полсекунды. Однако переход с затуханием в через полсекунды. Если вы хотите сделать это иначе, просто проигнорируйте этот материал с помощью setTimeout ()
Общий обзор того, что вы хотите сделать:
После загрузки страницы создайте функцию, которая вызывается через полсекунды (setTimeout)
Эта функция должна сгенерировать случайное число с min как 0 и max как количество дочерних элементов элемента #container минус 1
Угасание дочернего элемента #container с индексом, предоставленным случайным числом.
Код Pusdo (Я давно не делал ничего с jQuery. Или Javascript, если на то пошло)
function onDocumentReady(){
setTimeout(500, "fadeInRandom()");
}
function fadeInRandom(){
var numElements = $("#container").children().length;
var randomElem = Math.random() * (numElements-1);
$("#container").children()[randomElem].fadeIn();
}
Я бы использовал сгенерированное случайное число для создания атрибута src изображения и соответственно построил селектор jQuery:
setInterval ( showRandomImage, 500 );
function showRandomImage()
{
var randNo = Math.floor(Math.random() * 101);
$("#container > img[src=" + randNo + "'.jpg']")
.animate({opacity: 0}, 500).fadeIn('slow');
}