如何使用 JavaScript 从侧面滑入图像？答案

【问题标题】：How to slide images in from the side using JavaScript?如何使用 JavaScript 从侧面滑入图像？
【发布时间】：2011-08-17 02:16:34
【问题描述】：

我有一个显示图像的脚本，有点像旋转木马。图像放置在 LI 中，左侧位置根据每张幻灯片的宽度进行更改（都一样）。目前，旧幻灯片刚刚消失，然后出现新幻灯片。

我想这样做，这样他们就可以从侧面滑入，并想知道是否有人可以给我一个基本示例，说明如何使用纯 JavaScript（没有 jQuery！）来做到这一点。

例如，我正在使用以下代码来更新包含 UL 的左侧位置。我怎样才能使它将所选图像向左或向右滑动（取决于单击下一个或上一个按钮）

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

【问题讨论】：

只是好奇……为什么讨厌 JQuery？
出于兴趣，为什么不用 jQuery？
客户反对使用。我知道这完全是荒谬的，但没有办法绕过它。 :(
这两个可能感兴趣：dhtmlkitchen.com/ape/example/anim 和 cinsoft.net/mylib-examples.html#transform。两者都是模块化的，避免了 jQuery 的臃肿。后者已经在旧版本的 IE 中经过大量测试并且运行良好。

标签： javascript animation slideshow slide

【解决方案1】：

简单，非 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

【讨论】：

【解决方案2】：

这是一个基本的元素滑动功能。您可以使用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/

【讨论】：

如何更新以创建另一个从右侧滑入图像的功能？（用于返回幻灯片）
@Cofey - 不需要其他函数，这将根据left 参数的值和元素的当前位置向任一方向滑动。我已经更新了我的答案。
点击两次按钮时出现错误（因此在动画完成之前再次运行）。有两个图像的一部分同时显示，而不仅仅是一个。你能告诉我如何解决这个问题吗？
@Cofey - 您需要存储对setTimeout 返回值的引用，并使其在全局范围内或至少在点击处理程序范围之外可用。单击按钮时，首先调用clearTimeout()。请参阅此更新的 JSFiddle：jsfiddle.net/gilly3/EuzAK/3。