jQueryで二つの画像を交互に変化するコードを紹介します。DEMOを作成したので、以下のリンクから確認できます。
今回は、以下のページで紹介されているコードを改変しています。
jQueryで画像がクロスフェードするシンプルな画像ビューアー（自動再生）を作成する方法「BlackFlag」
<div class="slider-wrap">
<div class="alternate-slider slider-1">
<ul class="alternate-slider-list">
<li class="alternate-slider-list__item"><img class="alternate-slider-list__image" src="assets/img/mainvisual_01.jpg" alt=""></li>
<li class="alternate-slider-list__item"><img class="alternate-slider-list__image" src="assets/img/mainvisual_02.jpg" alt=""></li>
</ul>
</div>
<div class="alternate-slider slider-2">
<ul class="alternate-slider-list">
<li class="alternate-slider-list__item"><img class="alternate-slider-list__image" src="assets/img/mainvisual_03.jpg" alt=""></li>
<li class="alternate-slider-list__item"><img class="alternate-slider-list__image" src="assets/img/mainvisual_04.jpg" alt=""></li>
</ul>
</div>
</div>jQuery( function($) {
var $setElm = $('.slider-1'), // 一つ目のスライダー
$setElm2 = $('.slider-2'), // 二つ目のスライダー
fadeSpeed = 3000, // アニメーションスピード(ms)
switchDelay = 6000; // 切り替え間隔(ms)
function alternate_slider( $elm, delay ) {
var firstDelay = delay;
$elm.each( function() {
var targetObj = $(this);
var findUl = targetObj.find('ul');
var findLi = targetObj.find('li');
var findLiFirst = targetObj.find('li:first');
findLi.css( { display: 'block', opacity: '0', zIndex: '99' } );
findLiFirst.css( { zIndex: '100' } ).stop().animate( { opacity: '1' },fadeSpeed );
setTimeout( function() {
setInterval( function() {
findUl.find( 'li:first-child' ).animate( {opacity:'0'}, fadeSpeed).next( 'li' ).css({ zIndex:'100' } ).animate( { opacity: '1' }, fadeSpeed ).end().appendTo( findUl ).css( { zIndex: '99' } );
}, switchDelay );
}, firstDelay );
});
}
alternate_slider( $setElm, 0 );
alternate_slider( $setElm2, switchDelay/2 );
} );.slider-wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: relative;
height: 480px;
background: #ddd;
}
.alternate-slider {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}
.alternate-slider-list__item {
display: none;
top: 0;
left: 0;
width: 100%;
height: 100%;
position: absolute;
}
.alternate-slider-list__image {
width: 100%;
height: 480px;
-o-object-fit: cover;
object-fit: cover;
}