Javascript 幻灯片错误（基于 Scriptaculous）

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(); } );

这可能会解决你的消隐问题……但也可能不会。无论如何，这些方法需要在您的幻灯片放映中使用；）

如果不能解决问题，请报告，我将进行更多故障排除。