マウスオーバーで画像を切り替える！jQueryで実現するインタラクティブな背景画像
2024-04-08
jQueryでDIVの背景画像を切り替える方法
css() メソッドを使って、background-image プロパティを直接変更する方法です。
1 単一の画像を切り替える
<div id="my-div"></div>
$(function() {
// 最初の画像を設定
$("#my-div").css("background-image", "url(image1.jpg)");
// ボタンクリック時に画像を切り替え
$("#my-button").click(function() {
$("#my-div").css("background-image", "url(image2.jpg)");
});
});
上記コードでは、まず最初の画像を image1.jpg に設定します。その後、ボタンクリック時に image2.jpg に切り替えます。
2 複数の画像をスライドショーのように切り替える
<div id="my-div"></div>
<script>
const images = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
];
$(function() {
// 最初の画像を設定
$("#my-div").css("background-image", `url(${images[0]})`);
// インターバルを設定
const interval = setInterval(() => {
// 画像のインデックスを更新
let index = images.indexOf($(".my-div").css("background-image"));
index = (index + 1) % images.length;
// 画像を切り替え
$("#my-div").css("background-image", `url(${images[index]})`);
}, 2000); // 2秒間隔
// マウスオーバー時にスライドショーを停止
$("#my-div").mouseenter(() => {
clearInterval(interval);
});
// マウスアウト時にスライドショーを再開
$("#my-div").mouseleave(() => {
interval = setInterval(() => {
let index = images.indexOf($(".my-div").css("background-image"));
index = (index + 1) % images.length;
$("#my-div").css("background-image", `url(${images[index]})`);
}, 2000);
});
});
</script>
上記コードでは、images 配列に複数の画像ファイルパスを格納します。その後、インターバルを設定して、一定時間ごとに画像を切り替えます。また、マウスオーバー時にスライドショーを停止し、マウスアウト時に再開するようにしています。
BgSwitcher プラグインを使うと、より簡単に背景画像を切り替えることができます。
1 プラグインのインストール
npm install jquery-bgswitcher
2 プラグインの使用
<div id="my-div"></div>
<script src="jquery-bgswitcher.min.js"></script>
<script>
$(function() {
$("#my-div").bgswitcher({
images: ["image1.jpg", "image2.jpg", "image3.jpg"],
interval: 2000, // 2秒間隔
});
});
</script>
上記コードでは、bgswitcher() メソッドを使って、images 配列に指定された画像を2秒間隔で切り替えます。
jQueryを使ってDIVの背景画像を切り替える方法はいくつかあります。今回紹介した方法を参考に、目的に合った方法を選択してください。
css() メソッドを使う
1 単一の画像を切り替える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="my-div"></div>
<button id="my-button">画像を切り替える</button>
<script>
$(function() {
// 最初の画像を設定
$("#my-div").css("background-image", "url(image1.jpg)");
// ボタンクリック時に画像を切り替え
$("#my-button").click(function() {
$("#my-div").css("background-image", "url(image2.jpg)");
});
});
</script>
</body>
</html>
2 複数の画像をスライドショーのように切り替える
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="my-div"></div>
<script>
const images = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
];
$(function() {
// 最初の画像を設定
$("#my-div").css("background-image", `url(${images[0]})`);
// インターバルを設定
const interval = setInterval(() => {
// 画像のインデックスを更新
let index = images.indexOf($(".my-div").css("background-image"));
index = (index + 1) % images.length;
// 画像を切り替え
$("#my-div").css("background-image", `url(${images[index]})`);
}, 2000); // 2秒間隔
// マウスオーバー時にスライドショーを停止
$("#my-div").mouseenter(() => {
clearInterval(interval);
});
// マウスアウト時にスライドショーを再開
$("#my-div").mouseleave(() => {
interval = setInterval(() => {
let index = images.indexOf($(".my-div").css("background-image"));
index = (index + 1) % images.length;
$("#my-div").css("background-image", `url(${images[index]})`);
}, 2000);
});
});
</script>
</body>
</html>
BgSwitcher プラグインを使う
1 プラグインのインストール
npm install jquery-bgswitcher
2 プラグインの使用
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>サンプルコード</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="jquery-bgswitcher.min.js"></script>
</head>
<body>
<div id="my-div"></div>
<script>
$(function() {
$("#my-div").bgswitcher({
images: ["image1.jpg", "image2.jpg", "image3.jpg"],
interval: 2000, // 2秒間隔
});
});
</script>
</body>
</html>
jQueryでDIVの背景画像を切り替えるその他の方法
animate() メソッドを使って、背景画像をアニメーションで切り替えることができます。
<div id="my-div"></div>
<script>
$(function() {
// 最初の画像を設定
$("#my-div").css("background-image", "url(image1.jpg)");
// ボタンクリック時に画像を切り替え
$("#my-button").click(function() {
$("#my-div").animate({
background-image: "url(image2.jpg)"
}, 1000); // 1秒間かけて切り替え
});
});
</script>
上記コードでは、animate() メソッドを使って、1秒間かけて image2.jpg に切り替えます。
delay() メソッドを使って、画像を切り替える前に一定時間待機することができます。
<div id="my-div"></div>
<script>
$(function() {
// 最初の画像を設定
$("#my-div").css("background-image", "url(image1.jpg)");
// ボタンクリック時に画像を切り替え
$("#my-button").click(function() {
$("#my-div").delay(1000).queue(function() {
$(this).css("background-image", "url(image2.jpg)");
$(this).dequeue();
});
});
});
</script>
上記コードでは、ボタンクリック後1秒間待機してから、image2.jpg に切り替えます。
$.each() メソッドを使って、複数の画像を順番に表示することができます。
<div id="my-div"></div>
<script>
const images = [
"image1.jpg",
"image2.jpg",
"image3.jpg",
];
$(function() {
// 最初の画像を設定
$("#my-div").css("background-image", `url(${images[0]})`);
// インターバルを設定
const interval = setInterval(() => {
// 画像のインデックスを更新
let index = images.indexOf($(".my-div").css("background-image"));
index = (index + 1) % images.length;
// 画像を切り替え
$.each(images, function(i, image) {
if (i === index) {
$("#my-div").css("background-image", `url(${image})`);
}
});
}, 2000); // 2秒間隔
});
</script>
jquery
