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回调。

试图获得这个script.aculo.us javascript幻灯片来做我想要的

1 个答案: