Вопрос

Я пытаюсь создать свое собственное слайд-шоу.Следующий код переходит с одного изображения на другое.Я бы хотел переключаться с 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>
Это было полезно?

Решение

Вы можете сделать это следующим образом, используя Установочный интервал:

$(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 переменная.

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

Другие советы

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

// 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);
    });
}

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

$(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 секунд.

Взгляните на это Вопрос о слайд-шоу jQuery

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

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

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

Например

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

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top