jQueryで複数画像をフェードイン・フェードアウトで切り替える

スライドショーのような感じで、数秒ごとに自動的に画像が切り替わるデザインを、jQueryで実装したいと思います。

画像が切り替わる時の表現は色々なものがありますが、今回はふわっと消えてふわっと表示されるような、フェードイン・フェードアウトで切り替わるようにしました。

調べているとスクリプトの書き方も色々あったので、いくつか紹介したいと思います。

画像を切り替える方法1

See the Pen WXRVvx by KUBO (@KUBOGEN) on CodePen.

HTML
<div id=”imageSlide”>
　<img src=”https://kubogen.com/wp-content/uploads/talk-img/talk-img-039.jpg” class=”active”>
　<img src=”https://kubogen.com/wp-content/uploads/marketing-img/marketing-img-022.jpg”>
　<img src=”https://kubogen.com/wp-content/uploads/talk-img/talk-img-016.jpg”>
</div>

CSS
#imageSlide {
　width: 250px;
　height: 175px;
　position: relative;
}
#imageSlide img {
　width: 250px;
　height: 175px;
　position: absolute;
　top: 0;
　left: 0;
　z-index: 8;
}
#imageSlide img.active {
　z-index: 10;
}
#imageSlide img.last-active {
　z-index: 9;
}

JavaScript
function slideSwitch() {
　　var $active = $(‘#imageSlide IMG.active’);

　　if ( $active.length == 0 ) $active = $(‘#imageSlide IMG:last’);

　　var $next = $active.next().length ? $active.next()
　　　　: $(‘#imageSlide IMG:first’);

　　$active.addClass(‘last-active’);

　　$next.css({opacity: 0.0})
　　　　.addClass(‘active’)
　　　　.animate({opacity: 1.0}, 1000, function() {
　　　　　　$active.removeClass(‘active last-active’);
　　　　});
}

$(function() {
　　setInterval( “slideSwitch()”, 2000 );
});

画像を切り替える方法2

See the Pen slideshow by KUBO (@KUBOGEN) on CodePen.

HTML
<div id=”imageSlide”>
　<img src=”https://kubogen.com/wp-content/uploads/talk-img/talk-img-039.jpg”>
　<img src=”https://kubogen.com/wp-content/uploads/marketing-img/marketing-img-022.jpg”>
　<img src=”https://kubogen.com/wp-content/uploads/talk-img/talk-img-016.jpg”>
</div>

CSS
#imageSlide {
　width: 250px;
　height: 175px;
　display: block;
　position: relative;
　margin: 0;
　padding: 0;
}
#imageSlide img {
　width: 250px;
　height: 175px;
　display: block;
　position: absolute;
}

JavaScript
function slideshow(target){
　　setTimeout(function(){
　　　　var slide = $(target).children().last();
　　　　$(slide).fadeOut(1000,function(){
　　　　　　$(target).prepend(slide);
　　　　　　$(slide).show();
　　　　　　slideshow(target);
　　　　});
　　},2000);
}
slideshow(‘#imageSlide’);

画像を切り替える方法1

画像を切り替える方法2

Leave a Comment X