スライドショーを止めるのはできたのですが、再開する方法がわかりません。
どなたか教えていただけますでしょうか。
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 $('img').on('click', function() { 15 clearInterval(timer); 16 }); 17 }); 18});
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> 28
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。