图像滑块不稳定

我已经将一个普通的javascript/css图像滑块放在一起，开始时只是一个学习练习，但现在正在寻找应用它在现实世界中。问题在于我的桌面（这是一款高规格的游戏平台）上的动画不稳定 - 在手机上甚至更糟（在某种程度上它不再是一个动画）图像滑块不稳定

您可以在动作中看到它在这里：

www.chrishowie.co.uk/sands/

的jsfiddle隔离很多相关代码的 - 这不是一个“这不工作”的问题，所以希望小提琴给予足够的帮助优化它。

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

}

更新：仍然没有得到解决，但在移动设备上我已可通过降低图像的大小为小屏幕，也不会显示图像是在屏幕之外。不是很顺利，但到达那里。

非常感谢，

来源

2014-10-16 Bruford

更改的setTimeout到较慢的速度即3500，测试后降低值，直到它是可以接受的。 – jeff 2014-10-16 22:48:56

无论如何，滑块在可用性方面都很糟糕。我建议使用一个已经制作好的，如果你把它投入生产的话，那里已经有一些很棒的功能 – 2014-10-16 23:50:22

@jeff Timemout功能只是我的解决方案的一部分，它可以阻止堆叠相同的动画并导致滑动不对齐。在我添加它之前它是波涛汹涌，所以它没有任何影响。 – Bruford 2014-10-17 08:39:29

像杰里米所提到的，在你的jsfiddle“转型”问题造成的，它也使你的网站上。

在第221行的“Main.css”中删除“transition：top ease 2s;”从类.slide

一切正常然后Win8.1 /谷歌浏览器/ I7

来源

2014-12-21 19:28:41

图像滑块不稳定

回答

相关问题