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情報：寸法を設定し、#slideXは、それぞれの個々の背景画像です.slide

は、コードやバグを取得することができます。 #bulletXはナビゲーションボタンです。

また、animationX_swap（）は、そのスライドに固有のアニメーションです。彼らは別のファイルに住んでいて、このポストをあまりに長くしてしまったでしょう。

バグ： 今、自動再生機能は素晴らしいです。あなたは一日中それを見ることができますしゃっくりを見ることはできません。ナビゲーションボタンが使用されたとき、特に＃bullet1の問題が発生します。 ＃bullet1をクリックしてから2に進み、1に戻ると、自動再生は、その前にスライドがフェードアウトするようにスピードアップしているようです。私は完全な初心者ですが、私はこれまでこれを作ってくれました。誰も私がこれをきれいにするのを助け、本質的にはhttp://kleientertainment.com/のスライダーを再想像できますか？

Answer 1

別の投稿のjQueryサイクルプラグインhttp://malsup.com/jquery/cycle/が見つかりました。

私はそれを使ってスライダを作り直し、必要に応じて正確にプリフォームします。いい物！