Как я могу автоматически воспроизводить этот слайдер javascript?

Я нашел этот хороший слайдер js, который работает, нажимая на переключатели, выбирая слайды для просмотра.

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

Я видел другие вопросы о подобных проблемах, но не смог найти правильный ответ на свою проблему. Помогите, пожалуйста?

<script type="text/javascript">
    $(document).ready(function () {

        var showCaseItems = $('.show-case-item').hide();

        var splashes = $('.splash').hide();
        //get each image for each slide and set it as a background of the slide
        //            splashes.each(function () {
        //                var img = $(this).find('img');
        //                var imgSrc = img.attr('src');
        //                img.css('visibility', 'hidden');
        //                $(this).css({ 'background-image': 'url(' + imgSrc + ')', 'background-repeat': 'no-repeat' });
        //            });

        splashes.eq(0).show();
        showCaseItems.eq(0).show();

        var prevIndex = -1;
        var nextIndex = 0;
        var currentIndex = 0;

        $('#banner-pagination li a').click(function () {

            nextIndex = parseInt($(this).attr('rel'));

            if (nextIndex != currentIndex) {
                $('#banner-pagination li a').html('<img src="assets/img/slidedot.png" alt="slide"/>');
                $(this).html('<img src="assets/img/slidedot-active.png" alt="slide"/>');
                currentIndex = nextIndex;
                if (prevIndex < 0) prevIndex = 0;

                splashes.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
                    $(this).hide();
                });
                splashes.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 500, function () { });

                showCaseItems.eq(prevIndex).css({ opacity: 1 }).animate({ opacity: 0 }, 500, function () {
                    $(this).hide();
                    showCaseItems.eq(nextIndex).show().css({ opacity: 0 }).animate({ opacity: 1 }, 200, function () { });
                });

                prevIndex = nextIndex;
            }

            return false;
        });

    });
</script>

javascript slider jquery autoplay
person Marco    schedule 04.04.2013    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете использовать jquery и setTimeout

setTimeout(function() {$('#banner-pagination li a').trigger('click');}, 1500);

этот код будет повторяться каждые 1,5 секунды и вызывать щелчок по #banner-pagination li a

person vlio20    schedule 04.04.2013
comment
Привет, большое спасибо за ваш ответ, он работает только частично: у меня есть три слайда, и код, который вы предложили, заставляет его скользить с первого слайда на третий, а затем ничего. Я немного поиграю с этим, но если у вас есть идеи, почему это происходит, пожалуйста, дайте мне знать! - person Marco; 04.04.2013
comment
У меня буквально десятки .css и .js. Я боюсь, что возня с ним займет у меня больше, чем мои рабочие часы! Я попытался установить var nextIndex равным 1, но безрезультатно. Мх. - person Marco; 04.04.2013

arrow_upward
0
arrow_downward

вы можете использовать событие триггера jquery и принудительно нажать событие щелчка переключателя

$('#foo').trigger('щелчок');

http://api.jquery.com/trigger/

person meer    schedule 04.04.2013

arrow_upward
0
arrow_downward 

setInterval(function() 
  {$('#banner-pagination li a[rel='+((currentIndex+1)%3)+']').trigger('click');},5000);

Спасибо

person Namrata Tolani    schedule 16.08.2013