【发布时间】：2014-12-12 10:50:18
【问题描述】：
我已经制作了一个普通的 javascript/css 图像滑块，开始只是一个学习练习，但现在我希望将它应用到现实世界中。问题是我的桌面上的动画很不稳定（这是一个高规格的游戏装备）——在移动设备上更糟（在某种程度上它不再是真正的动画了）
您可以在这里看到它的实际效果：
www.chrishowie.co.uk/sands/
jsfiddle 隔离了大部分相关代码 - 这不是“这不起作用”的问题，因此希望 fiddle 提供足够的帮助来帮助优化它。
http://jsfiddle.net/9aozrxy8/5/
总结：我有一个连续 4 张图片的 DIV，每张图片都是页面宽度的 100%。我使用 javascript 来 translateX（我已经尝试过 translate3d，因为听说它使用 GPU，但没有产生太大差异），并且我将 CSS 转换设置为在转换中缓和。
我还认为我可能只是想在这个网站上做太多事情 - 但后来我看到其他一些网站做得更多，而且它像丝绸一样光滑。所以我想我错过了一些东西。
function slideRight() {
if (sliding) {
return false
};
window.sliding = true;
el = document.getElementById("slider");
cst = getComputedStyle(el);
transformst = cst.transform || cst.webkitTransform || cst.mozTransform;
widthst = cst.width;
widthst = widthst.replace("px", ""); // computed width of slider (7680px)
slidewidth = widthst / 4;
transformst = transformst.replace("matrix(", "");
transformst = transformst.replace(")", "");
transformst = transformst.split(",");
transformst = transformst[4]; // returns current transform in px without unit (px)
if (!transformst) {
transformst = 0;
}
var activebtn = "sldr" + Math.round((Number(transformst) / (-1 * slidewidth)));
document.getElementById(activebtn).classList.remove("sliderbuttonactive");
if (activebtn != "sldr3") {
document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.visibility = "visible";
document.getElementById("slider" + Math.round((2 + Number(transformst) / (-1 * slidewidth)))).style.display = "initial";
document.getElementById("slider").style.transform = "translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-webkit-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-moz-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("slider").style.transform = "-ms-translate3d(" + 25 * ((Number(transformst) / (slidewidth)) - 1) + "%, 0, 0)";
document.getElementById("leftslidebtn").style.visibility = "visible";
document.getElementById("leftslidebtn").style.display = "block";
}
activebtn = activebtn.replace("sldr", "");
activebtn = "sldr" + (1 + Number(activebtn));
document.getElementById(activebtn).classList.add("sliderbuttonactive");
if (Number(activebtn.replace("sldr", "")) == 3) {
document.getElementById("rightslidebtn").style.visibility = "hidden";
document.getElementById("rightslidebtn").style.display = "none";
}
setTimeout(function () {
window.sliding = false
}, 2000);
}
更新：仍未解决，但在移动设备上，我通过减小小屏幕的图像尺寸并且不显示屏幕外的图像使其可用。不是很顺利，但可以到达那里。
非常感谢，
C
【问题讨论】：
-
将 setTimeout 改成较慢的速度，即 3500，测试然后减小值直到可以接受为止。
-
你的滑块在可用性方面已经很糟糕了。如果您将其投入生产，我建议您使用已经制作好的，那里已经有一些很棒的
-
@jeff Timemout 函数只是我的解决方案的一部分，用于阻止相同的动画被堆叠并导致滑块未对齐。在我添加之前它很不稳定，所以它没有任何影响。
-
@ZachSaucier 如果你有任何关于可用性的具体问题，我会欢迎他们；我开始这个项目是为了学习和使用预制的滑块对实现这个目标没有帮助。
-
我可能误解了一些东西，但您的 JSFiddle 没有为我制作动画的原因是 CSS 媒体查询声明设置
transition:none用于小于 900 像素的视口。除此之外，在带有板载图形的 Firefox 36 / Win7 / i7 上，动画非常流畅。
标签： javascript html css transform