質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

421閲覧

スライダーの連続クリックを防止する処理をjavascriptで実装したい

suzu1234

総合スコア41

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2023/02/09 18:38

実現したいこと

prev・nextボタンを押して左右に画像を切り替えるスライダーを実装しました。しかし、prevやnextボタンを連続でクリックされないようにする処理が実装できずに困っています。

調べたこと

インターネットにてjavscriptの連続クリック防止に関する記事を一通り確認しました。「disabled」を使いボタンを活性・非活性にするというページがいくつか出てきたのですが、調べてみるとinputタグやbuttonタグに使用する物のようでした。

自分が作ったコードでは画像を切り替えるボタンはpタグで実装したため、うまく参考にすることができず詰まってしまっている状態です

画像を切り替える際にaddeventlistenerのclickイベントを使っているのですが、代案としてsetTimeoutを応用できないかということも考えたのですが、他にいい方法があればお知恵を拝借したく質問させていただきました。

該当のソースコード

<div id="slider"> <div id="slider-contents"> <div class="slider-item1" id="item1">1</div> <div class="slider-item1" id="item2">2</div> <div class="slider-item1" id="item3">3</div> <div class="slider-item1" id="item4">4</div> <div class="slider-item1" id="item5">5</div> </div> <div id="btn"> <p id="prev">prev</p> <p id="next">next</p> </div> </div>
html { font-size: 100%; } img { max-width: 100%; } * { box-sizing: border-box; outline: 1px solid magenta; } body { margin: 0; padding: 0; } #btn { display: flex; justify-content: space-around; } #prev, #next { width: 40%; text-align: center; background-color: silver; } #item1 { background-color: red;} #item2 { background-color: blue;} #item3 { background-color: green;} #item4 { background-color: yellow;} #item5 { background-color: purple;} /*----------------------------------------------------------------------------*/ #slider { overflow: hidden; } #slider-contents { background-color: pink; display: flex; overflow: hidden; width: 1200px; margin: 0 auto; } #item1, #item2, #item3, #item4, #item5 { height: 450px; min-width: 450px; margin-right: 40px; line-height: 450px; text-align: center; font-size: 50px; } .slider-item1 { transform: translateX(-605px); transition: all 1s ease 0s; } .slider-item2 { transform: translateX(-1095px); transition: all 1s ease 0s; } .slider-item3 { transform: translateX(-1585px); transition: all 1s ease 0s; } .slider-item4 { transform: translateX(-2075px); transition: all 1s ease 0s; } .slider-item5 { transform: translateX(-2565px); transition: all 1s ease 0s; } .slider-item1_copy { transform: translateX(-3055px); transition: all 1s ease 0s; } .slider-item1_return { transform: translateX(-605px); transition: all 0s ease 0s; } .slider-item5_copy { transform: translateX(-115px); transition: all 1s ease 0s; } .slider-item5_return { transform: translateX(-2565px); transition: all 0s ease 0s; }
const item1 = document.getElementById('item1'); const item5 = document.getElementById('item5'); const item2 = document.getElementById('item2'); const item4 = document.getElementById('item4'); // itemの複製 let item5_copy = item5.cloneNode(true); let item1_copy = item1.cloneNode(true); let item2_copy = item2.cloneNode(true); let item4_copy = item4.cloneNode(true); // item1の前、item5の後、複製item1の後に複製したitemを表示 item1.before(item5_copy); item5.after(item1_copy); item1_copy.after(item2_copy); item5_copy.before(item4_copy); /*----------------------------------------------------------------------------*/ // prevとnextの切り替えのボタン const prev = document.getElementById('prev'); const next = document.getElementById('next'); // slider-contents内にあるdivタグを取得 let sliderContents = document.getElementById('slider-contents'); let slider = sliderContents.getElementsByTagName('div') next.addEventListener('click', () => { for (let i = 0; i < slider.length; i++) { if (slider[i].classList.contains('slider-item1') === true) { slider[i].classList.remove('slider-item1'); slider[i].classList.add('slider-item2'); } else if (slider[i].classList.contains('slider-item2') === true) { slider[i].classList.remove('slider-item2'); slider[i].classList.add('slider-item3'); } else if (slider[i].classList.contains('slider-item3') === true) { slider[i].classList.remove('slider-item3'); slider[i].classList.add('slider-item4'); } else if (slider[i].classList.contains('slider-item4') === true) { slider[i].classList.remove('slider-item4'); slider[i].classList.add('slider-item5'); } else if (slider[i].classList.contains('slider-item5') === true) { slider[i].classList.remove('slider-item5'); slider[i].classList.add('slider-item1_copy'); setTimeout( () => { slider[i].classList.remove('slider-item1_copy'); slider[i].classList.add('slider-item1_return'); }, 1000); } else if (slider[i].classList.contains('slider-item1_return') === true) { slider[i].classList.remove('slider-item1_return'); slider[i].classList.add('slider-item2'); } } }) prev.addEventListener('click', () => { for (let i = 0; i < slider.length; i++) { if (slider[i].classList.contains('slider-item5') === true) { slider[i].classList.remove('slider-item5'); slider[i].classList.add('slider-item4'); } else if (slider[i].classList.contains('slider-item4') === true) { slider[i].classList.remove('slider-item4'); slider[i].classList.add('slider-item3'); } else if (slider[i].classList.contains('slider-item3') === true) { slider[i].classList.remove('slider-item3'); slider[i].classList.add('slider-item2'); } else if (slider[i].classList.contains('slider-item2') === true) { slider[i].classList.remove('slider-item2'); slider[i].classList.add('slider-item1'); } else if (slider[i].classList.contains('slider-item1') === true) { slider[i].classList.remove('slider-item1'); slider[i].classList.add('slider-item5_copy'); setTimeout( () => { slider[i].classList.remove('slider-item5_copy'); slider[i].classList.add('slider-item5_return'); }, 1000); } else if (slider[i].classList.contains('slider-item5_return') === true) { slider[i].classList.remove('slider-item5_return'); slider[i].classList.add('slider-item4'); } } })

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Cocode

2023/02/09 21:32 編集

inputまたはbuttonタグを使用しない理由はなんですかー? 仕事などの要件・条件でpタグのままでしなければならないということであれば仕方ないとは思いますが。 ユーザビリティやアクセシビリティの観点から、pタグそのものをボタンに使用することは推奨しません。 よければinputまたはbuttonタグのご使用をご検討ください〜
suzu1234

2023/02/10 03:45

わかりました、buttonタグを使って修正してみたいと思います!
guest

回答1

0

ベストアンサー

フラグで管理すればよいでしょう
(フラグが消えている間は実行しない)

javascript

1<style> 2.active{background-Color:red;} 3</style> 4<script> 5window.addEventListener('DOMContentLoaded', ()=>{ 6 const activeSlider=document.getElementsByClassName('slider-item1 active'); 7 let flg_wait=true; 8 let timer; 9 document.addEventListener('click',(e)=>{ 10 if(e.target.matches('#btn p')){ 11 if(flg_wait){ 12 const elem=e.target==prev? 13 activeSlider[0].previousElementSibling??document.querySelector('.slider-item1:last-child'): 14 activeSlider[0].nextElementSibling??document.querySelector('.slider-item1'); 15 activeSlider[0].classList.remove('active'); 16 elem.classList.add('active'); 17 } 18 flg_wait=false; 19 clearTimeout(timer); 20 timer=setTimeout(()=>flg_wait=true,300); 21 } 22 }); 23}); 24</script> 25<div id="slider"> 26 <div id="slider-contents"> 27 <div class="slider-item1 active" id="item1">1</div> 28 <div class="slider-item1" id="item2">2</div> 29 <div class="slider-item1" id="item3">3</div> 30 <div class="slider-item1" id="item4">4</div> 31 <div class="slider-item1" id="item5">5</div> 32 </div> 33 <div id="btn"> 34 <p id="prev">prev</p> 35 <p id="next">next</p> 36 </div> 37 </div>

投稿2023/02/10 04:00

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問