jquery - jquery淡入淡出滑块不过渡

Question

我正在尝试制作一个小 jquery 滑块来简单地在图像之间淡入淡出，但是当它淡入下一张幻灯片时，它会显示一秒钟的幻灯片，然后返回到第一张。我不是最擅长 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

                    });

Answer 1

下一张幻灯片检查通过了计数，因为您正在检查当前幻灯片。首先淡出上一张幻灯片，然后淡出下一张。数组索引从 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);