javascript - 试图让这个 script.aculo.us javascript 幻灯片做我想做的事

Question

所以我使用 .fade 和 .appear 使这张幻灯片工作得非常好，但是我为之做这件事的人对此并不满意，他们希望它的行为像 THIS ONE文本覆盖层脱落，图像向侧面滑动，然后覆盖层弹出。

script.aculo.us 有一个 .DropOut，但没有相反的函数，因此我正在使用我在其他地方找到的函数。

这是我到目前为止的代码，但幻灯片没有执行任何操作。它只是加载第一个图像和覆盖层，仅此而已。没有动画。我确信我在某个地方犯了一些语法错误，但它是有效的并且没有给出任何错误。

JSFiddle (也包括 html 和 css)

请注意，这仍然无法容纳从右侧滑入的新图像，我还没有找到效果。现在，如果这能按原样工作，我会很高兴。

var i = 0;
var image_slide = new Array('image-1', 'image-2');
var overlay_slide = new Array('overlay-1', 'overlay-2');
var NumOfImages = image_slide.length;
var wait = 8000;

function SwapImage(x, y) {
    $(overlay_slide[y]).DropOut({
        duration: 0.5
    });
    $(overlay_slide[y]).fade({
        duration: 0.1
    });
    $(image_slide[x]).appear({
        duration: 0.5
    });
    $(image_slide[y]).Move({ 
        x: -1000, 
        y: 0, 
        mode: 'relative',
        duration: 0.5
    });
    $(overlay_slide[x]).appear({
        duration: 0.1
    });
    $(overlay_slide[x]).Emerge({
        duration: 0.5
    });
}

function StartSlideShow() {
    play = setInterval(Play, wait);
}

function Play() {
    var imageShow, imageHide;

    imageShow = i + 1;
    imageHide = i;

    if (imageShow == NumOfImages) {
        SwapImage(0, imageHide);
        i = 0;
    } else {
        SwapImage(imageShow, imageHide);
        i++;
    }
}

Effect.Emerge = function (element) {
    element = $(element);
    var oldStyle = {
        top: element.getStyle('top'),
        left: element.getStyle('left')
    };
    var position = element.positionedOffset();
    return new Effect.Parallel(
    [new Effect.Move(element, {
        x: 0,
        y: -100,
        sync: true
    }),
    new Effect.Opacity(element, {
        sync: true,
        from: 0.0,
        to: 1.0
    })],
    Object.extend({
        duration: 0.5,
        beforeSetup: function (effect) {
            effect.effects[0].element.show().makePositioned().setStyle({
                top: (position.top + 100) + 'px'
            });
        },
        afterFinishInternal: function (effect) {
            effect.effects[0].element.undoPositioned().setStyle(oldStyle);
        }
    }, arguments[1] || {}));
};
StartSlideShow();

Answer 1

您走在正确的轨道上，只需要多玩一点效果库，Emerge 功能太多，您需要变得更简单。

我已经更新了你的 jsfiddle

http://jsfiddle.net/aB79G/3/

基本上，您需要准备右侧的下一张幻灯片，并使用 Effect.Morph 而不是 Effect.Move 一次移动两张图片

另请注意我如何使用 afterFinish 回调来让您将效果串在一起。