下一个和上一个 jQuery 幻灯片

Question

我已经开始设置带有下一个和上一个按钮的幻灯片放映，但它似乎不起作用。它还没有完成，但下一个和上一个按钮应该可以工作。

    var timer;
    var slides = 5;
    var timeLen = 5000;

    function nextSlide(){
      clearTimeout(timer);
      var current= parseInt($("#counter").html());

      if(current < slides){
          var nextSlide = current + 1;
      } else {
          var nextSlide = 1;
      }

      // set rear image to next slide
      $("#slide_back img").attr("src","http://daduber.com/ss2/" + nextSlide + ".jpg");

      // hide front image
      $("slide_front").animate({opacity: "0"},700,"linear",function(){

      // change front image src(currently hidden)
      $("#slide_front img").attr("src","http://daduber.com/ss2/" + nextSlide + ".jpg");
       $("slide_front").animate( {opacity: "0"}, 700, "linear", function(){
      // display front image
      $("#slide_front").css("opacity","1");

      // change jumpers
      $("#jumpers li.current").removeAttr("class");
      $("#jumpers #" + nextSlide).attr("class","current");

      // update counter
      $("#counter").html(nextSlide);

      // set timer for next image
      timer = setTimeout("nextSlide()", timeLen);

  });

  }

  $(document).ready(function(){
      timer = setTimeout("nextSlide()", timeLen);   
  });

jsfiddle.net

在我看来，它与动画上的回调函数有关。 如果我将其替换为 $("slide_front").animate({不透明度："0"}, 700); 它可以在没有动画的情况下工作

Answer 1

我可以通过将动画更改为：

    $("#slide_front").animate(
    {'opacity':'0',
    duration:700, easing:"linear"},
    function(){