jQuery精選內容滑塊瓦特/動畫爲每個幻燈片

Question

我創建了一個功能內容滑塊使用jQuery和我碰到了一些障礙，試圖擺脫最後幾個錯誤。它的靈感來源於http://kleientertainment.com/，所以請檢查一下，你會看到即將發生的事情。即使使用全新的代碼，對於實現這種效果的任何建議都會很有幫助！

這個想法是一個簡單的div交換，但對於加載時觸發的每張幻燈片都有自定義動畫。它也必須在每次轉換之間淡入黑色，無論是自動播放還是點擊。

讓我們得到的代碼和錯誤：

$(document).ready(function() { 

//START SLIDES HIDDEN 
$('.slide').css({ 
    'position': 'absolute', 
    'display': 'none' 
}); 

//RUN FIRST SLIDE 
runSlideShow(1); 
animation1_swap(); 

//AUTOPLAY FUNCTION 
function runSlideShow(slideNumber) { 
    $('#slide' + slideNumber).fadeIn(1000).delay(10000).fadeOut(1000, function() { 

     if (slideNumber == 4) { 
      animation1_swap(); 
      runSlideShow(1); 
     } 
     if (slideNumber == 3) { 
      animation4_swap(); 
      runSlideShow(4); 
     } 
     if (slideNumber == 2) { 
      animation3_swap(); 
      runSlideShow(3); 
     } 
     if (slideNumber == 1) { 
      animation2_swap(); 
      runSlideShow(2); 
     } 
    }); 

    //NAVIGATION BUTTONS 
    $('#bullet1').click(function() { 
     $('.slide:visible').stop(true, true).fadeOut(1000, function() { 
      animation1_swap(); 
      runSlideShow(1); 
     }); 
    }); 
    $('#bullet2').click(function() { 
     $('.slide:visible').stop(true, true).fadeOut(1000, function() { 
      animation2_swap(); 
      runSlideShow(2); 
     }); 
    }); 
    $('#bullet3').click(function() { 
     $('.slide:visible').stop(true, true).fadeOut(1000, function() { 
      animation3_swap(); 
      runSlideShow(3); 
     }); 
    }); 
    $('#bullet4').click(function() { 
     $('.slide:visible').stop(true, true).fadeOut(1000, function() { 
      animation4_swap(); 
      runSlideShow(4); 
     }); 
    }); 
} 
}); 

CSS信息：.slide設置尺寸，並#slideX是爲每個單獨的背景圖像。 #bulletX是導航按鈕。

此外，animationX_swap（）是該幻燈片特有的動畫。他們住在另一個文件中，並且會讓這個帖子太長。

錯誤： 現在，自動播放功能非常棒，您可以整天觀看而不會看到呃逆。使用導航按鈕時會遇到麻煩，特別是＃bullet1。如果我點擊＃bullet1，然後轉到2，然後回到1，自動播放似乎會加速，因爲幻燈片會在應該出現之前淡出。我是一個初學者，但我做到了這一點，任何人都可以幫助我清理它，並基本上重新構想http://kleientertainment.com/的滑塊？

Answer 1

剛剛從其他帖子發現jQuery循環插件http://malsup.com/jquery/cycle/。

我重拍我的滑塊，它完全按照需要進行預製。好東西！