Question

我已经整理了一个简单的javascript / css图像滑块，刚开始只是一个学习练习，但现在我想在现实世界中应用它。问题是我的桌面上的动画很不稳定（这是一款高规格的游戏装备） - 在手机上更糟糕（在某种程度上它不再是动画了）

你可以在这里看到它：

www.chrishowie.co.uk/sands /。

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

总结：我有一个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

像杰瑞米提到的那样，＆＃34;过渡＆＃34;在你的JSFiddle引起了这个问题，它也在你的网站上造成了这个问题。

在你的＆＃34; Main.css＆＃34;在第221行。删除＆＃34;过渡：top ease 2s;＆＃34;来自班级.slide

一切正常，然后在Win8.1 /谷歌Chrome / i7

图像滑块不连贯

1 个答案: