Suwak obrazu jest przerywany

Question

Połączyłem zwykły suwak obrazu javascript/css, który rozpoczął się jako ćwiczenie edukacyjne, ale teraz zamierzam je zastosować w realnym świecie. Problem polega na tym, że animacja jest chropowata na moim pulpicie (co jest v. Urządzeniem do gier o wysokich wymaganiach) - a jeszcze gorzej na telefonie komórkowym (do tego stopnia, że ​​to już nie jest animacja)

Możesz to zobaczyć w akcji tutaj:

www.chrishowie.co.uk/sands/

jsfiddle izoluje dużo stosownego kodu - to nie „to nie działa” problem, więc miejmy nadzieję, że skrzypce daje wystarczająco, aby pomóc zoptymalizować go .

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

Podsumowując: Mam DIV z 4 obrazów w jednym rzędzie, z których każdy obraz jest 100% szerokości strony. Używam javascript do translateX (próbowałem translate3d, ponieważ słyszałem, że korzysta z GPU, ale nie robiłem zbyt wielu różnic) i ustawiłem przejścia CSS, aby ułatwić transformację.

Pomyślałem również, że potencjalnie próbuję zrobić zbyt wiele na tej stronie - ale potem patrzę na inne witryny robiące dużo więcej i jest gładkie jak jedwab. Sądzę, że czegoś mi brakuje.

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

}

zmiana: nadal nie został rozwiązany, ale na telefon Zrobiłem to użyteczny poprzez zmniejszenie rozmiaru obrazu dla małych ekranów i również nie wyświetla obrazów, które są poza ekranem. Nie jest idealnie gładki, ale się tam dostanie.

Dzięki dużo,

C

Answer 1

jak Jeremy wspomniano, że „przejście” w JSFiddle spowodowało problem, to również powoduje go na swojej stronie.

W twoim "Main.css" w linii 221. Usuń "przejście: najwyższa łatwość 2s;" z klasy .slide

Wszystko działa poprawnie, a następnie na Win8.1/Google Chrome/i7