javascript - 如何使用 JavaScript 从侧面滑入图像？

Question

我有一个显示图像的脚本，有点像轮播。图像放置在 LI 中，并且左侧位置根据每张幻灯片的宽度进行更改(全部相同)。目前，旧幻灯片消失，然后新幻灯片出现。

我想让它们从侧面滑入，并且想知道是否有人可以给我一个基本示例，说明如何使用纯 JavaScript(无 jQuery!)来完成此操作。

例如，我使用以下代码来更新包含 UL 的左侧定位。我怎样才能做到这一点，以便它将所选图像向左或向右滑动(取决于是否单击下一个或上一个按钮)

containingUL.style.left = '-' + (slideNumber * slideWidth) + 'px';

Answer 1

这是一个基本的元素滑动功能。您可以调整 steps 和 timer 的值来获得恰到好处的动画速度和平滑度。

function slideTo(el, left) {
    var steps = 25;
    var timer = 25;
    var elLeft = parseInt(el.style.left) || 0;
    var diff = left - elLeft;
    var stepSize = diff / steps;
    console.log(stepSize, ", ", steps);

    function step() {
        elLeft += stepSize;
        el.style.left = elLeft + "px";
        if (--steps) {
            setTimeout(step, timer);
        }
    }
    step();
}

所以你可以去:

slideTo(containingUL, -slideNumber * slideWidth);

编辑:忘记链接到 JSFiddle

编辑:要向左滑动，请提供小于当前 style.left 的 left 值。要向右滑动，请提供一个大于当前 style.left 的值。对你来说这应该不重要。您应该能够将其插入到您现有的代码中。我猜测您当前的代码会递增或递减 slideNumber ，然后根据 SlideNumber 设置 style.left 。像这样的东西应该有效:

if (nextButtonClicked) slideNumber++;
else slideNumber--;
slideTo(containingUL, -slideNumber * slideWidth);

我用滑动“画廊”的工作示例更新了 JSFiddle，包括上一个和下一个按钮。 http://jsfiddle.net/gilly3/EuzAK/2/