前提・実現したいこと
javascriptで、「<」もしくは「>」ボタンを押すと前もしくは次に進むスライドショーを作りました。配列に画像を配置していて、最後まで行くと1枚目の写真に戻るようにしたいです。
発生している問題
配列に入れている最後の写真が表示されず、最後から二番目の写真の次に、配列の最初の写真に戻ってしまう
該当のソースコード
html
1<div> 2 <img src="images/blank.png" alt="" id="background"> 3</div>
javascript
1<script> 2 const backgroundImage = ['images/blank.png', 'images/background2.png', 'images/background3.png', 'images/background4.png', 'images/background5.png']; 3 4 let current = 0; 5 6 function changeImage(num) { 7 if(current + num >= 0 && current + num < backgroundImage.length) { 8 current += num; 9 document.getElementById('background').src = backgroundImage[current]; 10 } 11 if(current + num >= backgroundImage.length) { 12 current = 0; 13 document.getElementById('background').src = backgroundImage[current]; 14 } 15 }; 16 17 document.getElementById('prev').onclick = function() { 18 changeImage(-1); 19 }; 20 document.getElementById('next').onclick = function() { 21 changeImage(1); 22 }; 23 document.getElementById('change').onclick = function() { 24 changeImage(1); 25 }; 26</script>
試したこと
上記のように、current + num >= backgroundImage.length
の時にcurrent
の値を0に書き換えることで、配列の初めに戻せると思って試しました。初めに戻せるのはいいのですが、配列の最後の写真が表示されなくなってしまいます。
補足情報(FW/ツールのバージョンなど)
プログラミング初心者です。できるだけ易しく教えていただけると嬉しいです。なにか抜けているところがあればご指摘ください。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/17 12:24