JSまたはCSSを使用して、タッチスワイプで1枚ずつ50枚の画像を表示する方法

Question

ここは新しいです。 画面をスワイプすると、さまざまな画像（50以上の画像が表示されます）を表示するWebアプリケーションプロジェクトがあります。 これは、漫画を演奏するようなものだと想像することができます。私は画面をスワイプすると、画像が次々に表示されます。 各画像のサイズは1〜2MBです。

ここに私のコードです。 imgsはイメージの配列です。

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

私はあなたがイメージの間でスワイプしたときにだけ、画像の概要ではないフル解像度1-2 Mbのバージョンを確認したいと思いますので、あなたは、画像を拡大縮小して1つを選択する方法を提供するload imageライブラリを使用することができます完全な解像度で見ることができます。

ヒント：

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