javascript - 图像 slider 不稳定

Question

我制作了一个普通的 javascript/css 图像 slider ，开始时只是一个学习练习，但现在我希望将其应用到现实世界中。问题是动画在我的桌面上不稳定(这是一个 v. 高规范的游戏装备)——在移动设备上更糟(在某种程度上它不再是真正的动画)

你可以在这里看到它的实际效果:

www.chrishowie.co.uk/sands/

jsfiddle 隔离了大部分相关代码 - 这不是“这不起作用”的问题，因此希望 fiddle 能够提供足够的帮助来优化它。

http://jsfiddle.net/9aozrxy8/5/

总结:我有一个 DIV，其中连续有 4 个图像，每个图像都是页面宽度的 100%。我使用 javascript 来 translateX(我已经尝试过 translate3d，因为听说它使用 GPU，但没有太大区别)并且我将 CSS 转换设置为 ease-in 转换。

我还认为我可能只是想在这个网站上做太多事情 - 但后来我看到其他一些网站做了更多的事情并且它像丝绸一样光滑。所以我想我错过了一些东西。

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

Answer 1

正如 Jeremy 提到的，您的 JSFiddle 中的“转换”导致了问题，它也在您的网站上引起了问题。

在您的“Main.css”中的第 221 行。删除“transition: top ease 2s;”来自类.slide

然后在 Win8.1/Google Chrome/i7 上一切正常