【実現したいこと】
2秒ごとに画像がスライドするスライダーを作成しました。
そこにインデックスボタンを追加しボタンを押した時、対応する画像が表示され、対応する画像が表示されてから2秒後に再び2秒ごとに画像が移動するようにしたいと考えています。
【現在の状況】
ボタンを押した時対象の画像を表示することはできているのですがボタンを押すタイミングによっては(画像が次スライドに移動する直前にボタンを押すなど)、対象の画像が表示されてから2秒を待たずに次の画像に移動してしまいます。
「2秒ごとに画像を移動させる処理」がずっと作動している状態で「クリックした時の処理」を実行しているので「クリックした時の処理」を実行中も2秒がカウントされているため「実現したい動作」にならないと考えています。
【試したこと】
「クリックの処理」にclearTimeoutを使用して一旦キャンセルしてからもう一度「2秒ごとに画像を移動させる処理」をsetTimeoutを使って呼び出す方法を試そうと思いましたが、setTimeoutのidが毎回変わるためうまくいきませんでした。
「実現したい動作」にするためにはどうすればいいか全くわからない状態となって困っております。
わかる方がいらっしゃいましたらご教授いただければ幸いです。
html
1<!-- ----- carousel3 ----- --> 2 <section class="carousel-3"> 3 <div class="carousel-h"> 4 <h1>Carousel 3</h1> 5 </div> 6 <div class="slider-wrapper3"> 7 <p class="slider-title3">carousel スライドで出現</p> 8 9 <div class="slides-container3"> 10 <ul class="slides3 transition" id="slide_case"> 11 <li class="slide3 no1 start "><img src="./img/1.png" alt=""></li> 12 <li class="slide3 no2 start"><img src="./img/2.png" alt=""></li> 13 <li class="slide3 no3 start "><img src="./img/3.png" alt=""></li> 14 <li class="slide3 no4 start"><img src="./img/4.png" alt=""></li> 15 <li class="slide3 no5 start"><img src="./img/5.png" alt=""></li> 16 </ul> 17 </div> 18 19 <div class="index-btn-wrapper3"> 20 <!--index_btn_coveにclass名にstopを入れるとindexボタンを押した時オートスライドが停止する--> 21 <ul id="index_btn_cover" class="slide_stop"> 22 </ul> 23 </div> 24 </div> 25 </section>
JavaScript
1jQuery(function($){ 2 var slideList=$('.slide3'); 3 var slideLength=slideList.length; 4 5 //htmlにスライドを追加すると自動でスライドを追加する 6 let slideCopyRoot=document.getElementById('slide_case'); 7 for(i=0; i<slideLength; i++){ 8 let slideCopy=slideCopyRoot.children[i].cloneNode(true); 9 document.getElementById('slide_case').appendChild(slideCopy); 10 } 11 12 13 14 //htmlでスライド(画像)を追加した時(一番下に記入した時)一番上に自動で移動させる記述(center画像をhtmlの一番上に記述したものにするため。) 15 let slideCase=document.getElementById('slide_case'); 16 let slideCaseLastChild=document.getElementById('slide_case').lastElementChild; 17 let slideCaseFirstChild=document.getElementById('slide_case').firstElementChild; 18 slideCase.insertBefore(slideCaseLastChild,slideCaseFirstChild); 19 // 20 21 //=================================================// 22 //autoslider 23 //=================================================// 24 var loopCounter=0; 25 var btnIndex=-1; 26 var autoslider1=function(autoclear3){ 27 console.log('autoslider1読み込み'); 28 if( loopCounter < slideLength){ 29 $('.slides3').addClass('transition'); 30 loopCounter+=1; 31 $('.slides3').css('transform','translateX('+loopCounter*(-100)+'%)'); 32 var clear=setTimeout(autoslider3,2000); 33 34 }else{ 35 $('.slides3').removeClass('transition'); 36 setTimeout(autoslider2,0); 37 } 38 39 } 40 41 42 43 var autoslider2=function(){ 44 loopCounter=0; 45 $('.slides3').css('transform','translateX(0%)'); 46 var autoclear2=setTimeout(autoslider1,100); 47 } 48 49 var autoslider3=function(){ 50 var autoclear3=setTimeout(autoslider1,2000); 51 return autoclear3; 52 } 53 54 var autoclear1=setTimeout(autoslider1,1000); 55 56 57 //=================================================// 58 //indx_btnの作成 59 //=================================================// 60 for(i=0; i<slideLength; i++){ 61 let indexBtn=document.createElement('li'); 62 indexBtn.id="index-btn"+i; 63 indexBtn.className="index-btn3"; 64 indexBtn.textContent=i+1; 65 document.getElementById('index_btn_cover').insertBefore(indexBtn,null); 66 } 67 68 69 70 //=================================================// 71 //index_btnを押した時のスライド制御 72 //=================================================// 73 $('.index-btn3').click(function(){ 74 btnIndex=$('.index-btn3').index( $(this) ); 75 $('.slides3').css('transform','translateX('+btnIndex*(-100)+'%)'); 76 console.log(btnIndex); 77 if( !(-1===btnIndex) ){ 78 if( $('#index_btn').hasClass('slide_sotp') ){ 79 console.log("true"); 80 }else{ 81 console.log('btnIndex false'); 82 loopCounter=btnIndex; 83 btnIndex=-1; 84 console.log("false"); 85 } 86 } 87 }); 88 89});//jQuery end
scss
1.carousel-3{ 2 padding-top: 20px; 3 padding-bottom: 20px; 4} 5 6.slider-title3{ 7 font-size: 32px; 8 text-align: center; 9} 10 11//=================================================// 12//slide部分 13//=================================================// 14.slides-container3{ 15 padding:0 50px; 16 position: relative; 17 //overflow: hidden; 18 19 20} 21 22.slides3{ 23 text-align: center; 24 max-width: 800px; 25 margin:0 auto; 26 list-style: none; 27 padding-left: 0; 28 white-space: nowrap; 29 letter-spacing: -0.4em; 30 img{ 31 width: 100%; 32 height: 500px; 33 } 34 } 35 36.transition{ 37 transition:transform 1s; 38} 39 40.slide3{ 41 padding:30px; 42 box-sizing: border-box; 43} 44 45 46//=================================================// 47//slide部分 end 48//=================================================// 49 50//ボタンデザイン1 51.index-btn3{ 52 background-color: red; 53 text-align: center; 54 width: 40px; 55 height: 40px; 56 line-height: 40px; 57 display: inline-block; 58 margin-right: 10px; 59 font-size: 20px; 60 cursor: pointer; 61} 62 63// btnの位置調整 64.index-btn-wrapper3{ 65 padding-top: 40px; 66 text-align: center; 67} 68 69//slideのon,off 70.slide3{ 71 transition:transform 2s ease 0s; 72 display:inline-block; 73} 74 75 76/////////////////////// 77 78.start{ 79 transform:translate(-100%); 80} 81
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/08/04 09:29
2020/08/05 01:25