jQueryで左右交互に画像が切り替わる機能を実装したい

jQueryで二つの画像を交互に変化するコードを紹介します。DEMOを作成したので、以下のリンクから確認できます。

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;
}

石井秀幸@WEBデザイナー
WordPress公式『横浜 WordPress Meetup』主宰/株式会社ノクチ基地 取締役/モンゼンクリエイティブ合同会社 代表。WEB制作に関する技術や役立つ情報を発信していきます。10年にわたるWordPress歴を背景に、幅広いアイデアを形にするお手伝いをしています。