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

在我看来，它在animate上具有回调功能。如果我用它替换它 $（“slide_front”）。animate（{opacity：“0”}，700）; 它没有动画

Answer 1

我能够通过将动画更改为：

来修复它

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

jQuery幻灯片显示下一个和上一个

1 个答案: