Javascript jQuery-交叉淡入淡出效果

我有以下javascript代码：

 function displayNextImage() {
              x = (x === images.length - 1) ? 0 : x + 1;
              document.getElementById("img").src = images[x];
              $(".body_image").fadeOut(300);
              $(".body_image").fadeIn(300);
          }

          function displayPreviousImage() {
              x = (x <= 0) ? images.length - 1 : x - 1;
              document.getElementById("img").src = images[x];
              $(".body_image").fadeOut(100);
              $(".body_image").fadeIn(200);
          }

          function startTimer() {
              setInterval(displayNextImage, 3000);
          }

          var images = [], x = 0;
          images[0] = "images/image1.png";   
          images[1] = "images/image2.jpg";
          images[2] = "images/image3.jpg";
          images[3] = "images/image4.jpg";
          images[4] = "images/image4.jpg";
          images[5] = "images/image4.jpg";

函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
document.getElementById（“img”）.src=images[x]；
$（“.body_image”）.fadeOut（300）；
$（“.body_image”）.fadeIn（300）；
}
函数displayPreviousImage（）{
x=（x如果我了解您的需求，您希望：

fadeOut（）
当前图像
替换图像
淡入
fadeOut（）
采用可选的完成功能；使用该功能替换图像并开始淡入


函数displayNextImage（）{
x=（x==images.length-1）？0:x+1；
$（“.body_image”）.淡出（300，
函数（）{
document.getElementById（“img”）.src=images[x]；
$（“.body_image”）.fadeIn（300）；
});
}
函数displayPreviousImage（）{
x=（x此代码淡入新图像，淡出前一个图像。下面是一个JSFIDLE：


以及守则：

function displayNextImage() {
  crossFade(x,x+1);
}

function displayPreviousImage() {
  crossFade( x,x-1);
}

function crossFade( imageOut, imageIn ) {
  var i = $( ".image-" + imageIn % 2 ),
    timing = 500;
  x = imageIn % images.length;
  i.attr( 'src', images[ x ] );
  $( ".image-" + imageOut % 2 ).fadeOut(timing);
  i.fadeIn(timing);
}

function startTimer() {
  displayNextImage();
  setInterval(displayNextImage, 3000);
}

var images = [
     "http://www.newton.ac.uk/files/covers/968361.jpg",
     "http://cdn.phys.org/newman/gfx/news/hires/2013/takingtheran.jpg",
     "http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg",
     "http://ccl.northwestern.edu/netlogo/models/models/Sample%20Models/Mathematics/Probability/Random%20Walk%20360.png"
  ],
  x = 0;

startTimer();