jQuery случайно исчезают в изображениях
-
06-07-2019 - |
Вопрос
У меня есть контейнер с большим количеством маленьких изображений.
<div id="container">
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
...
<img src="100.jpg" />
</div>
Я установил непрозрачность на 0. (не скрывая) Затем я хочу показать (fadeIn) случайное изображение через полсекунды. например 5, 1, 55 ...
Любые предложения, большое спасибо
Решение
попробуйте это
<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();
}
Если вы хотите добавить все изображения вместо этого, то нет необходимости использовать все случайные вещи, просто прокрутить и задержать случайное число от 500 мс до 1 секунды. Вы должны поставить функцию скрытия в любом случае. Или с непрозрачностью используйте анимацию CSS.
$('#container img').each(function(index) {
$(this).delay( Math.random()*500+500 ).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');
}