Javascript淡入淡出图像滑块

Question

我有以下jQuery代码，它们在两张图像之间从100-0％的不透明度淡入淡出。现在，我试图在它们之间添加几个图像。最后，我想在滑块上显示13张不同的图像。

感谢任何帮助。

function fadeImage() {
  var opacity = $("#slider").slider("value");
  $("#old").css("opacity", opacity);
}

$(function() {
  $("#slider").slider({
      range: "max",
      min: 0,
      max: 1,
      value: 0,
      step: .05,
      slide: fadeImage,
      change: fadeImage
    }
  );
});

@import url("//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css");
#timemachine {
  width: 80%;
}

#holder {
  position: relative;
}

#old {
  opacity: 0;
  filter: alpha(opacity=100);
  /* For IE8 and earlier */
}

#new {
  width: 100%;
  overflow: auto;
}

#new img {
  max-width: 100%;
  max-height: 100%;
}

#old img {
  max-width: 100%;
  max-height: 100%;
}

.overlay {
  position: absolute;
  top: 0;
}

#slider {
  width: 90%;
  margin: auto;
}

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>

<div id="timemachine">
  <div id="holder">
    <div id="new">
      <img src="img/bild6-1-interaktivesplanum.jpg" width="469" height="500" />
    </div>
    <div id="old" class="overlay">
      <img src="img/bild6-13-interaktivesplanum.jpg" width="469" height="498" />
    </div>
  </div>
  <div id="slider"></div>
</div>