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

的nextslide检查通过计数，因为你检查当前的幻灯片。 首先淡出上一张幻灯片，然后淡入即将到来。 数组索引从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);