Как я могу непрерывно устанавливать Fadein и Fadeout Sildeshow для изображений в JQuery без какого-либо события?

Question

Как я могу установить простое слайд-шоу JQuery с CSS непрерывно, без каких-либо событий, таких как наведение мыши, щелчок и т. Д .?

Answer 1

Большинство подобных функций в jQuery вызываются или, по крайней мере, инициализируются при вызове $(document).ready().Просто включите команду синхронизации, например setInterval, которая возвращает вашу функцию, и она будет работать при загрузке DOM, например:

$(document).ready(function(){
    var t = setInterval(mySlideShow, 3000)
    });

Или, если функция повторяется, просто вызовите функцию на ready():

$(document).ready(function(){
    mySlideShow();
    });

Редактировать:

В соответствии с запросом самое простое слайд-шоу, которое я могу придумать, выглядит примерно так:

<div id="slideshow">
    <img src="1.jpg" />
    <img src="2.jpg" />
    <img src="3.jpg" />
</div>

CSS: изображения должны быть установлены на display:none

Тогда jQuery:

$(document).ready(function(){
    $('#slideshow img:first-child').addClass('shown').show();
    setInterval(slideShow,3000);
});
//and here is the function
function slideShow()
    {
    $('#slideshow img:last-child').prependTo($('#slideshow')).fadeIn(1000);
    $('.shown').fadeOut(1000).removeClass('shown');
    }

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

Answer 2

написать функцию, которая выполняет слайдшоу.используйте settimeout, дайте ему интервал и вызовите вашу функцию.

посмотрите пример здесь: Цикл css background