Q&A
実現したいこと
最後のスライド写真の時、次へ（＞）ボタンを押すと
最初の写真に戻るようにしたい。
前提
無し
発生している問題・エラーメッセージ
無し
該当のソースコード
<body></body><div class="hscroll"> <ul> <li><img src="img/as002.jpg"></li> <li><img src="img/as003.jpg"></li> <li><img src="img/as004.jpg"></li> </ul> <span class="arrow left"></span> <span class="arrow right"></span> </div> <script> document.querySelectorAll('.left').forEach(elm => { elm.onclick = function () { let ul = elm.parentNode.querySelector('ul'); ul.scrollLeft -= ul.clientWidth; }; }); document.querySelectorAll('.right').forEach(elm => { elm.onclick = function () { let ul = elm.parentNode.querySelector('ul'); ul.scrollLeft += ul.clientWidth; }; }); </script>
試したこと
無し
補足情報（FW/ツールのバージョンなど）
html
css
javascript
回答1件
0
スクロールオフセットが範囲外になったら0に戻せば良いので、
js
1let ul = elm.parentNode.querySelector('ul'); 2// ul.scrollLeft += ul.clientWidth; 3const newOffset = ul.scrollLeft + ul.clientWidth; 4ul.scrollLeft = newOffset >= ul.scrollWidth ? 0 : newOffset;
こんな感じでどうでしょうか。
投稿2023/03/22 05:28
総合スコア18631
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。