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

我有一个脚本，它显示的图像有点像旋转木马。图像放置在LIs中，并且根据每张幻灯片的宽度更改左侧位置（所有相同）。目前，旧幻灯片消失，新幻灯片出现

我想让他们从侧面滑进来，想知道是否有人能给我一个基本的例子，说明如何使用纯JavaScript（没有jQuery！）来实现这一点

例如，我使用下面的代码来更新包含UL的对象的左侧位置。如何使其向左或向右滑动所选图像（取决于单击的是“下一步”按钮还是“上一步”按钮）

简单、非jQuery：

http://www.webmonkey.com/2010/02/make_a_javascript_slideshow/ 简单、非jQuery：

http://www.webmonkey.com/2010/02/make_a_javascript_slideshow/

---

这里有一个基本的元素幻灯片功能。您可以使用

步数

和

定时器

的值来获得恰到好处的动画速度和平滑度

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);

编辑：忘记链接到

编辑：要向左滑动，请提供小于当前

样式的
左
值。左
。要向右滑动，请提供一个大于当前
样式的值。left
。对你来说没什么大不了的。您应该能够将其插入到现有代码中。我猜您当前的代码要么递增要么递减
slideNumber
，然后根据slideNumber设置
style.left
。像这样的方法应该会奏效：

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

我用一个滑动“gallery”的工作示例更新了JSFIDLE，包括prev和next按钮
 这里有一个基本的元素滑动函数。您可以使用
步数
和
定时器
的值来获得恰到好处的动画速度和平滑度

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);

编辑：忘记链接到

编辑：要向左滑动，请提供小于当前
样式的
左
值。左
。要向右滑动，请提供一个大于当前
样式的值。left
。对你来说没什么大不了的。您应该能够将其插入到现有代码中。我猜您当前的代码要么递增要么递减
slideNumber
，然后根据slideNumber设置
style.left
。像这样的方法应该会奏效：

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

我用一个滑动“gallery”的工作示例更新了JSFIDLE，包括prev和next按钮
 只是好奇。。。为什么厌恶JQuery？出于兴趣，为什么没有JQuery？客户反对使用它。我知道这完全是荒谬的，但没有办法避免（这两个可能很有意思：和。它们都是模块化的，避免了jQuery的膨胀。后者在旧版IE中经过了大量测试，运行得很好。只是好奇……为什么厌恶jQuery？出于兴趣，为什么没有jQuery？客户反对使用它。我知道这完全是荒谬的，但没有办法解决。）（这两个可能很有趣：和。它们都是模块化的，避免了jQuery的膨胀。后者在旧版本的IE中经过了大量测试，运行得非常好。如何更新它以创建另一个从右侧滑动图像的功能？（用于返回幻灯片）@Cofey-不需要其他功能，这将根据
left
参数的值和元素的当前位置向任意方向滑动。我已更新了答案。单击按钮两次时出现错误（因此在动画完成之前再次运行）。一次显示两个图像的一部分而不是一个。您能告诉我如何解决此问题吗？@Cofey-您需要存储对
setTimeout
返回值的引用，并使其在全局范围内或至少在单击处理程序的范围外可用。单击按钮时，首先调用
clearTimeout（）
。请参阅此更新的JSFIDLE:。如何更新此页面以创建另一个用于从右侧滑动图像的功能？（用于返回幻灯片）@Cofey-不需要其他功能，这将根据
left
参数的值和元素的当前位置向任意方向滑动。我已更新了答案。单击按钮两次时出现错误（因此在动画完成之前再次运行）。一次显示两个图像的一部分而不是一个。您能告诉我如何解决此问题吗？@Cofey-您需要存储对
setTimeout
返回值的引用，并使其在全局范围内或至少在单击处理程序的范围外可用。单击按钮时，首先调用
clearTimeout（）
。请参阅此更新的JSFIDLE:。