jQueryで画像がフェードアウト・フェードインして切り替わるスライドショーを実装することができたのですが、以下のやり方ではスライドショーがループしてしまいます。
ループせずに最後の画像で止めたい場合はどうすればいいでしょうか?
なお、こちらのサイトを参考にしました。
https://sedoriplan.com/jquery-fadein-fadeout-image/
html
1<div id="imageSlide"> 2 <img src="" alt=""> 3 <img src="" alt=""> 4 <img src="" alt=""> 5</div>
jQuery
1$(function(){ 2 var setImg = '#imageSlide'; 3 var fadeSpeed = 2000; 4 var switchDelay = 4000; 5 6 $(setImg).children('img').css({opacity:'0'}); 7 $(setImg + ' img:first').stop().animate({opacity:'1',zIndex:'20'},fadeSpeed); 8 9 setInterval(function(){ 10 $(setImg + ' :first-child').animate({opacity:'0'},fadeSpeed).next('img').animate({opacity:'1'},fadeSpeed).end().appendTo(setImg); 11 },switchDelay); 12});
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/03 01:42