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