html
1 <div class="slider"> 2 <div class="slideSet"> 3 <div class="slide"><img src="%E5%90%8D%E7%A7%B0%E6%9C%AA%E8%A8%AD%E5%AE%9A-1.jpg"></div> 4 <div class="slide"><img src="8.jpg"></div> 5 <div class="slide"><img src="7.png"></div> 6 7 </div> 8 9 10 <div class="prevBtn">pre</div> 11 <div class="nextBtn">next</div> 12 </div> 13 14
css
1 2.slider { 3 position: relative; 4 overflow: hidden; 5 width: 500px; 6 height: 500px; 7 margin: 0 auto 8} 9 10.slideSet { 11 position: absolute; 12} 13 14.slide { 15 display: flex; 16 float: left; 17 width: 500px; 18 height: 500px; 19 background: #333 20} 21 22.prevBtn { 23 position: absolute; 24 top: 50%; 25 left: -1%; 26 border-radius: 50%; 27 width: 30px; 28 height: 30px; 29 background: #fff 30} 31 32.nextBtn { 33 position: absolute; 34 top: 50%; 35 right: -1%; 36 border-radius: 50%; 37 width: 30px; 38 height: 30px; 39 background: #fff 40} 41
jquery
1 'use strict'; 2 $(function() { 3 4 var dir = -1; 5 var interval = 1000; 6 var duration = 600; 7 var timer; 8 9 $('.slideSet').prepend($('.slide:last-child')); 10 $('.slideSet').css( 11 'left', 12 -500); 13 14 timer = setInterval(slideTimer, interval); 15 16 function slideTimer() { 17 if (dir == -1) { 18 $('.sildeSet').animate({ 19 'left': '-=500px' 20 }, 21 duration, 22 function() { 23 $(this).append($('.slide:first-child')); 24 $(this).css('left', '-500'); 25 }); 26 } else { 27 $('.sildeSet').animate({ 28 'left': '+=500px' 29 }, duration, function() { 30 $(this).prepend($('.slide:last-child')); 31 $(this).css('left', '-500'); 32 33 dir = -1; 34 35 }); 36 37 } 38 } 39 40 $('.prevBtn').on('click', function() { 41 dir = 1; 42 clearInterval(timer); 43 timer = setInterval(slideTimer, interval); 44 slideTimer(); 45 }); 46 $('.nextBtn').on('click', function() { 47 dir = -1; 48 clearInterval(timer); 49 timer = setInterval(slideTimer, interval); 50 slideTimer(); 51 }); 52
コンソールでエラーチェックを見ても何も表示されていないので原因がわかりません。
自作のものですよね。でしたら「動かない」では他者にはわかりません。
どういう思想や仕様で組んだのか、ゴールも明示した上で、起きている現象もご提示ください。
あと、どの処理が動いてるかデバッグしてみましたか?
回答2件
あなたの回答
tips
プレビュー