图像滑块不连贯

Question

我已经把一个简单的javascript/css图像滑块放在一起,开始只是一个学习练习,但现在我想在现实世界中应用它.问题是我的桌面上的动画很不稳定(这是一款高规格的游戏装备) - 在移动设备上更糟糕(在某种程度上它不再是动画)

你可以在这里看到它:

www.chrishowie.co.uk/sands/

jsfiddle隔离了大部分相关的代码 - 它不是"这不起作用"的问题,所以希望这个小提琴足以帮助优化它.

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

总结:我有一个DIV,连续4个图像,每个图像是页面宽度的100%.我使用javascript来翻译X(我已经尝试过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

Answer 1

就像 Jeremy 提到的，JSFiddle 中的“转换”导致了这个问题，它也在您的网站上导致了这个问题。

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

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