画像をクリックしたらスライドショーを止めて、もう一度クリックしたら再開するようにしたいのですが、再開することができません。
どなたか教えていただけますでしょうか。
jquery
1$(function () { 2 $('.slideshow').each(function () { 3 let $slides = $(this).find('img'), 4 slideCount = $slides.length, 5 currentIndex = 0; 6 $slides.eq(currentIndex).fadeIn(); 7 timer = setInterval(showNextSlide, 1000); 8 function showNextSlide () { 9 let nextIndex = (currentIndex + 1) % slideCount; 10 $slides.eq(currentIndex).fadeOut(); 11 $slides.eq(nextIndex).fadeIn(); 12 currentIndex = nextIndex; 13 } 14 }); 15 $('img').on('click', function() { 16 if (timer != null) { 17 clearInterval(timer); 18 timer = null; 19 } else { 20 setInterval(showNextSlide, 1000); 21 } 22 }); 23});
JQUERY
1$(function () { 2 $('.slideshow').each(function () { 3 let $slides = $(this).find('img'), 4 slideCount = $slides.length, 5 currentIndex = 0; 6 $slides.eq(currentIndex).fadeIn(); 7 timer = setInterval(showNextSlide, 1000); 8 function showNextSlide () { 9 let nextIndex = (currentIndex + 1) % slideCount; 10 $slides.eq(currentIndex).fadeOut(); 11 $slides.eq(nextIndex).fadeIn(); 12 currentIndex = nextIndex; 13 } 14 function stop() { 15 clearInterval(timer); 16 timer = null; 17 } 18 $('img').on('click', function() { 19 if (timer != null) { 20 stop(); 21 } else { 22 setInterval(showNextSlide, 1000); 23 timer = 1; 24 } 25 }); 26 }); 27});
2番目のJQUERYのようにすれば、再開はできたのですが、2度目以降ののストップと再開ができません。
html
1<!DOCTYPE html> 2<html class="no-js" lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<meta http-equiv="X-UA-Compatible" content="IE=edge"> 6<title>Chapter 05-01 · jQuery 最高の教科書</title> 7<link rel="stylesheet" href="./css/normalize.css"> 8<link rel="stylesheet" href="./css/main.css"> 9<script src="./js/vendor/modernizr.custom.min.js"></script> 10<script src="./js/vendor/jquery-1.10.2.min.js"></script> 11<script src="./js/main.js"></script> 12</head> 13<body> 14 15<header class="hero-header"> 16 <div class="inner"> 17 <div class="slideshow"> 18 <img src="./img/slide-1.jpg" alt="" width="1600" height="465"> 19 <img src="./img/slide-2.jpg" alt="" width="1600" height="465"> 20 <img src="./img/slide-3.jpg" alt="" width="1600" height="465"> 21 <img src="./img/slide-4.jpg" alt="" width="1600" height="465"> 22 </div> 23 </div> 24</header> 25 26</body> 27</html>
回答1件
あなたの回答
tips
プレビュー