Javascript slideshow bug（Scriptaculous based）

Question

在下面的幻灯片演示代码中，有一个按“上一个”和“下一个”链接的功能。 “下一个”工作正常，如果你继续按下它，它将循环浏览所有幻灯片。

由于某种原因，“之前”的一个有点搞砸了 - 它会回到一个或两个幻灯片，但它会变成空白！

你能帮忙吗？ 谢谢！

<script type="text/javascript"> 
    start_slideshow(1, 3, 3000); 

    var currentSlide = 1; 

    function start_slideshow(start_frame, end_frame, delay) { 
     id = setTimeout(switch_slides(start_frame,start_frame,end_frame, delay), delay); 
    } 

    function switch_slides(frame, start_frame, end_frame, delay) { 

     return (function() { 

      Effect.Fade('slide' + frame, { duration: 1.0 }); 

      if (frame == end_frame) { 
       frame = start_frame; 
       currentSlide = frame; 
      } else { 
       frame = frame + 1; 
       currentSlide = frame; 
      } 

      Effect.Appear('slide' + frame, { duration: 1.0 }); 

      if (delay == 1000) { 
       delay = 3000; 
      } 

      id = setTimeout(switch_slides(frame, start_frame, end_frame, delay), delay); 
     }) 
    } 

    function stop_slideshow() { 
     clearTimeout(id); 
    } 

    function next_slide() { 

     clearTimeout(id); 

     Effect.Fade('slide' + currentSlide, { duration: 1.0 }); 

     if (currentSlide == 4) { 
      currentSlide = 0; 
     } 

     currentSlide = currentSlide + 1; 
     Effect.Appear('slide' + currentSlide, { duration: 1.0 }); 
     id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay); 
    } 

    function previous_slide() { 

     clearTimeout(id); 

     if (currentSlide == 0) { 
      currentSlide = 1; 
     } else { 
      Effect.Fade('slide' + currentSlide, { duration: 1.0 }); 

      currentSlide = currentSlide - 1; 
      Effect.Appear('slide' + currentSlide, { duration: 1.0 }); 
      id = setTimeout(switch_slides(currentSlide, currentSlide, currentSlide, delay), delay); 
     } 
    } 

</script> 

Answer 1

我遇到了类似这样的问题。我假设您在当前排队的效果完成之前“快速”单击上一个或下一个按钮。这会导致错误，导致给定元素同时应用多个影响。

为了解决这个问题，scriptaculous使我们能够按顺序排列效果。参考这里的文档： http://wiki.github.com/madrobby/scriptaculous/effect-queues

基本上，你需要添加一个范围到你的效果。因此，在添加持续时间后，您需要添加队列范围。

例子：

Effect.Fade('slide' + currentSlide, { duration: 1.0, queue: { scope: 'slide_show' } }); 

这使得当按下一个按钮，我们可以在队列取消任何东西。

var queue = Effect.Queues.get('slide_show'); 
queue.each(function(effect) { effect.cancel(); }); 

这可能会解决您的消隐......但可能不会。无论如何，这些方法需要在您的幻灯片中使用;）

如果它没有解决问题，请回报，我会做一些更多的疑难解答。