下一个和上一个 jQuery 幻灯片

Posted 2023-02-25

【中文标题】下一个和上一个 jQuery 幻灯片

【英文标题】：jQuery slideshow next and previous

【发布时间】：2017-02-12 16:21:15

【问题描述】：

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

    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); 它可以在没有动画的情况下工作

【参考方案1】：

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

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