jQueryを使って、複数の画像エリアでそれぞれランダムに画像が切り替わるアニメーションを実装する方法を紹介します。

Ad

DEMO

HTML

<div class="photo">
	<div class="photo-area">
		<img src="https://blog.grinee.net/demo/images/image1.png">
		<img src="https://blog.grinee.net/demo/images/image2.png">
		<img src="https://blog.grinee.net/demo/images/image3.png">
		<img src="https://blog.grinee.net/demo/images/image4.png">
	</div>
	<div class="photo-area">
		<img src="https://blog.grinee.net/demo/images/image1.png">
		<img src="https://blog.grinee.net/demo/images/image2.png">
		<img src="https://blog.grinee.net/demo/images/image3.png">
		<img src="https://blog.grinee.net/demo/images/image4.png">
	</div>
	<div class="photo-area">
		<img src="https://blog.grinee.net/demo/images/image1.png">
		<img src="https://blog.grinee.net/demo/images/image2.png">
		<img src="https://blog.grinee.net/demo/images/image3.png">
		<img src="https://blog.grinee.net/demo/images/image4.png">
	</div>
	<div class="photo-area">
		<img src="https://blog.grinee.net/demo/images/image1.png">
		<img src="https://blog.grinee.net/demo/images/image2.png">
		<img src="https://blog.grinee.net/demo/images/image3.png">
		<img src="https://blog.grinee.net/demo/images/image4.png">
	</div>
</div>

CSS

aspect-ratioで高さを取得していますので、画像の比率にあわせて変更してください。

.photo {
	display: flex;
	flex-wrap: wrap;
}
.photo-area {
	aspect-ratio: 1 / 1; /* 画像の比率 */
	display: flex;
	position: relative;
	width: 25%;
}
.photo-area img {
	height: auto;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	transition: opacity .5s ease;
	width: 100%;
	z-index: 0;
}
.photo-area img.active {
	opacity: 1;
	z-index: 1;
}

JavaScript

記述の前にjQueryの読み込みが必要です。

jQuery(function ($) {

	const interval = 2000; // 切り替え間隔（ミリ秒）

	$(".photo-area").each(function () {
		$(this).find('img').eq(0).addClass("active");
	});

	setInterval(() => {
		const $allImages = $(".photo-area img");

		const $inactiveImages = $allImages.not(".active");
		const $randomImage = $inactiveImages.eq(Math.floor(Math.random() * $inactiveImages.length));

		const $siblings = $randomImage.siblings("img");

		$siblings.removeClass("active");
		$randomImage.addClass("active");
	}, interval);

});