スクロールしたら画像を表示させて、そこからは一定時間が経ったら今の画像を消して次の画像に切り替わるようにしたいと思っています。
しかしスクロールするたびに今の画像が表示されているのに次の画像が表示されてしまい「消しては表示させて」ができません。
スクロールされる度に処理が実行されるので、一回画像を表示させてスクロールしなければ永続的に画像を切り替えられるのですが、スクロールすると処理が実行されてしまい、新しく1番目の画像が表示されてしまいます。
永久的に動くカルーセルを「スクロールされたら表示」するのはjQueryでは不可能なのでしょうか?
html
1... 2<div class="cards-i"> 3 <div class="first"> 4 <div class="card"> 5 <img> 6 </div> 7 <div class="card"> 8 <img> 9 </div> 10 <div class="card"> 11 <img> 12 </div> 13 <div class="card"> 14 <img> 15 </div> 16 </div> 17</div> 18...
jQuery
1$(window).scroll(function (){ 2 $('.cards-i').each(function(){ 3 var position = $(this).offset().top; 4 var scroll = $(window).scrollTop(); 5 var windowHeight = $(window).height(); 6 if (scroll > position - windowHeight + 200){ 7 8 $('.first').each(function(){ 9 var $slides = $(this).find('.card'), 10 slideCount = $slides.length, 11 currentIndex = 0; 12 13 $slides.eq(currentIndex).fadeIn(1000); 14 15 setInterval(showNextSlide,5500); 16 17 function showNextSlide(){ 18 var nextIndex = (currentIndex + 1) % slideCount; 19 20 $slides.eq(currentIndex).fadeOut(1000); 21 22 23 setTimeout(function(){ 24 $slides.eq(nextIndex).fadeIn(1000); 25 26 currentIndex = nextIndex; 27 },1000); 28 29 } 30 }); 31 32 } 33 }); 34 });
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。