单击Jquery Crossfade

Question

我有以下用于淡入淡出图像的java脚本。在html中，itall位于绝对位置，z-index指定为1到12. 2个箭头：左右。

全部是自动播放，我需要让每个功能都做同样的褪色，但点击左右箭头：FIDDLE

     var fadeInTime = 1000; fadeOutTime = 1000;


     function Slide11() {
          $("#slide11").fadeIn(fadeInTime, 'linear', function () {
            Slide12();
        });
     }

    function Slide10() {
        $("#slide10").delay(500).fadeIn(fadeInTime, 'linear', function () {
        Slide11();
       });
    }

    function Slide9() {
    $("#slide9").fadeIn(fadeInTime, 'linear').delay(2000).fadeOut(fadeOutTime,'linear', function () {                
       Slide10();
        });
   }

 function Slide8() {
    $("#slide8").delay(500).fadeIn(fadeInTime, 'linear', function () {
      Slide9();
   });
}

    function Slide7() {
      $("#slide7").fadeIn(fadeInTime, 'linear').delay(2000).fadeOut(fadeOutTime,'linear', function () {
       Slide8();
       });
   }

    function Slide6() {
       $("#slide6").delay(500).fadeIn(fadeInTime, 'linear', function () {
          Slide7();
        });
   }

function Slide5() {
    $("#slide5").fadeIn(fadeInTime, 'linear').delay(2000).fadeOut(fadeOutTime,'linear', function () {
        Slide6();
    });
}


   function Slide4() {
       $("#slide4").delay(500).fadeIn(fadeInTime, 'linear', function () {
        Slide5();
      });
   }
    function Slide3() {
      $("#slide3").fadeIn(fadeInTime, 'linear').delay(2000).fadeOut(fadeOutTime,'linear', function () {
        Slide4();
       });
    }



   function Slide2() {

    $("#slide1").delay(2000).fadeOut(fadeInTime, 'linear', function () {
       $("#slide2").fadeIn(fadeInTime, 'linear', function () {
        Slide3();
       });
    });
 }


  $(document).ready(function () {

    $("#slide1").hide();
    $("#slide2").hide();
    $("#slide3").hide();
    $("#slide4").hide();
    $("#slide5").hide();
    $("#slide6").hide();
    $("#slide7").hide();
    $("#slide8").hide();
    $("#slide9").hide();
    $("#slide10").hide();
    $("#slide11").hide();
    $("#slide12").hide();
    $("#colorstory").css("display", "");

    $("#slide1").fadeIn(200, 'linear', function () {
        Slide2();
        });

});