wie JS oder CSS zu verwenden, um 50 Bilder eins nach dem anderen mit Touch Swipe

Question

Ich bin neu hier. Es gibt ein Web-App-Projekt, um verschiedene Bilder zu zeigen (ich denke mehr als 50 Bilder), indem Sie den Bildschirm wischen. Sie können sich vorstellen, dass dies ist wie Cartoon spielen. Wenn ich den Bildschirm wische, werden die Bilder nacheinander angezeigt. Die Größe jedes Bildes beträgt 1-2 MB.

Hier ist mein Code. imgs ist ein Array von Bildern.

box1.addEventListener('touchmove', function(e){ 
    var i = 0; 
    var touchobj = e.changedTouches[0]; 
    var dist = Math.abs(parseInt(touchobj.clientX) - startx); 
    var X = Math.floor(dist/5) ;  

    for(;i<X;i++) { 
     if (i < 40) { 
     box1.innerHTML = "<img src=" + imgs[i] + " style='width:100%' >"; 
     } else { 
     box1.innerHTML = "<img src=" + imgs[50] + " style='width:100%' >"; 
     } 
    } 

    e.preventDefault(); 
}, false) 

Answer 1

denke ich, wenn Sie zwischen den Bildern Streichen Sie wollen einfach nur einen Überblick über die Bilder sehen nicht die volle Auflösung 1-2 Mb Version, so dass Sie load image Bibliothek verwenden können Bilder skaliert werden und bieten eine Möglichkeit, einen auszuwählen der Bilder, um es mit voller Auflösung zu sehen.

Tipp: Sie Math.min verwenden könnte loswerden der if/else Teil

for(;i<X;i++) { 
    box1.innerHTML = "<img src=" + imgs[Math.min(i, 50)] + " style='width:100%' >"; 
}