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

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

如果没有解决它，请回报一下，我会做更多的故障排除。

Javascript幻灯片错误（基于Scriptaculous）

1 个答案: