Слайд-шоу JQuery - PullRequest
Новая
       24

Слайд-шоу JQuery

0 голосов
/ 04 января 2010

Я пытаюсь создать свое собственное слайд-шоу. Следующий код исчезает с одного изображения на другое. Я бы хотел перейти от img1.jpg к img4.jpg, но я не уверен, как сделать паузу после каждого изменения. 

                i++;
                temp = "img"+i+".jpg";
                $("#img").fadeOut(function() {
                    $(this).load(function() { $(this).fadeIn(); });
                    $(this).attr("src", temp);
                });

ОБНОВЛЕНИЕ: я изменил код на следующий. По совету Джона Бокера я переименовал изображения в img0, img1, img2, img3. Это идет к первому, второму, третьему изображению, которое просто останавливается. Есть идеи? 

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
        <script>

            $(document).ready(function(){           
                var temp="";

                function slideshow(i)
                {
                    temp = "img"+i+".jpg";
                    $("#img").fadeOut(function() {
                         $(this).load(function() {
                                    $(this).fadeIn();
                                    // set a timeout of 5 seconds to show the next image;
                                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
                         });
                         $(this).attr("src", temp);
                    });
                }

                slideshow(0);


            });

        </script>
    </head>
    <body>
        <img src="img1.jpg" id="img"/>
    </body>
</html>

Ответы [ 6 ]

2 голосов
/ 31 мая 2012

посмотрите этот пример ... 

$(function(){
    $('.slideshow img:gt(0)').hide();
    setInterval(function(){$('.slideshow :first-child').fadeOut(2000).next('img').fadeIn(2000).end().appendTo('.slideshow');}, 4000);
});

Скрипка

просто измените 4000 на 8000 в сценарии, если вы хотите сделать паузу на каждом изображении в течение 8 секунд вместо 4 секунд.

2 голосов
/ 04 января 2010

Вы можете сделать это, используя setInterval : 

$(function() {

    var i = 0;

    // Four-second interval
    setInterval(function() {
        $("#img").fadeOut(function() {
            $(this).attr("src", "img" + i++ % 4 + ".jpg");
            $(this).fadeIn();
        });
    }, 4000);
}

Я упростил несколько вещей, которые могли вызывать некоторые другие проблемы, которые вы видите, убрав (казалось бы, лишний) вызов load внутри вашего fadeOut обратного вызова и удалив ненужную переменную temp .

(Наконец, если вы не просто делаете это для изучения, рассмотрите возможность использования одного из множества отличных плагинов для слайд-шоу, например Cycle .)

2 голосов
/ 04 января 2010

вы, вероятно, должны иметь это внутри функции: 

// show image i
function slideshow(i)
{
    temp = "img"+i+".jpg";
    $("#img").fadeOut(function() {
         $(this).load(function() {
                    $(this).fadeIn();
                    // set a timeout of 5 seconds to show the next image;
                    setTimeout(function(){ slideshow((i+1)%4); }, 5000);
         });
         $(this).attr("src", temp);
    });
}
0 голосов
/ 04 января 2010

Один прием заключается в использовании свойства элемента к его текущему значению с использованием таймера.

Например 

$("#img").fadeIn().show(3000).fadeOut();

Поскольку $ (this) уже виден, добавление .show (3000) означает, что элемент остается видимым в течение 3 с, прежде чем исчезнуть

0 голосов
/ 04 января 2010

Посмотрите на этот jQuery вопрос слайд-шоу

0 голосов
/ 04 января 2010

установить window.setInterval(function, delay) для вызова функции через заданный интервал для выполнения имеющегося у вас кода.

Существует множество плагинов, которые уже будут циклически обрабатывать изображения для вас (если задача не состоит в том, чтобы написать свой), одним из моих любимых плагинов является цикл-плагин .

...