如何使用 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/

Answer 2

简单，非 jQuery：

http://sandbox.scriptiny.com/contentslider/slider.html
http://www.webmonkey.com/2010/02/make_a_javascript_slideshow/
http://javascript.internet.com/miscellaneous/basic-slideshow.html