1

私は小さな jquery スライダーを作成して画像間を単純にフェードさせようとしていますが、次のスライドにフェードすると、スライドが 1 秒間表示されてから最初に戻ります。私は jquery が得意ではありません。JavaScript は言うまでもなく、私は PHP/BASH 派です。

http://jsfiddle.net/mrVGL/3/

jQuery

                    // Start Slides

                    $('#hi1').fadeTo("slow", 1.0, function () {

                        var slide = 1,
                            slides = 4
                            ids = [
                                '#hi1',
                                '#hi2',
                                '#hi3',
                                '#hi4', ],
                            slideShow = setInterval(function () {
                                var nextSlide = slide + 1;
                                if (slide >= slides) {
                                    nextSlide = 1;
                                }
                                $(ids[nextSlide]).fadeTo("fast", 1.0, function () {
                                    $(ids[slide]).fadeTo("slow", 0);
                                });
                                slide++;
                                if (slide >= slides) {
                                    slide = 1;
                                }
                            }, 5000);
                        // End Slides

                    });
4

1 に答える 1

3

現在のスライドをチェックしていたため、次のスライド チェックはカウントを通過しました。最初に前のスライドをフェードアウトしてから、次のスライドをフェードインします。配列インデックスは 0 から始まるため、配列インデックスを表す変数を 0 で開始することは理にかなっています。

とにかく次のことを試してください！:)

// Start Slides
$('#hi1').fadeTo("slow", 1.0);
var slide = 0,
ids = [
    '#hi1',
    '#hi2',
    '#hi3',
    '#hi4', ],
countSlides = slides.length,
slideShow = setInterval(function () {
    var nextSlide = slide + 1;
    if (nextSlide > countSlides - 1) {
        nextSlide = 0;
    }
    $(ids[slide]).fadeTo("slow", 0);
    $(ids[nextSlide]).fadeTo("fast", 1.0);
    slide++;
    if (slide > countSlides - 1) {
        slide = 0;
    }
}, 1000);
于 2013-04-27T22:04:38.407 に答える