<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Background Selector</title>
<style>
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #121212;
font-family: Arial, sans-serif;
}
.background {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background-size: cover;
background-position: center;
transition: background-image 0.5s ease;
z-index: -1;
}
.controls {
position: absolute;
bottom: 20px;
display: flex;
gap: 10px;
}
.arrow {
background-color: rgba(255, 255, 255, 0.7);
border: none;
padding: 12px;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.3s ease;
}
.arrow:hover { background-color: rgba(255, 255, 255, 1); }
.thumbnails {
display: flex;
gap: 8px;
}
.thumbnails img {
width: 80px;
height: 50px;
object-fit: cover;
opacity: 0.6;
transition: opacity 0.3s, border 0.3s;
cursor: pointer;
border: 2px solid transparent;
border-radius: 8px;
}
.thumbnails img.active-thumbnail {
opacity: 1;
border: 2px solid yellow;
}
</style>
</head>
<body>
<div class="background" id="background"></div>
<div class="controls">
<div class="thumbnails" id="thumbnails">
<img src="./nature1.jpg" class="active-thumbnail" data-bg="./nature1.jpg">
<img src="./nature2.jpg" data-bg="./nature2.jpg">
<img src="./nature3.jpg" data-bg="./nature3.jpg">
<img src="./nature4.jpeg" data-bg="./nature4.jpeg">
<img src="./nature5.jpeg" data-bg="./nature5.jpeg">
</div>
<button class="arrow" id="left">◀</button>
<button class="arrow" id="right">▶</button>
</div>
<script>
const background = document.getElementById('background');
const thumbnails = document.querySelectorAll('.thumbnails img');
let currentIndex = 0;
// Function to update the background based on the active thumbnail
const updateBackground = (index) => {
thumbnails.forEach((thumb, i) => {
thumb.classList.toggle('active-thumbnail', i === index);
});
background.style.backgroundImage = `url(${thumbnails[index].getAttribute('data-bg')})`;
};
// Left arrow click event
document.getElementById('left').onclick = () => {
currentIndex = (currentIndex - 1 + thumbnails.length) % thumbnails.length;
updateBackground(currentIndex);
};
// Right arrow click event
document.getElementById('right').onclick = () => {
currentIndex = (currentIndex + 1) % thumbnails.length;
updateBackground(currentIndex);
};
// Thumbnail click event to update the background
thumbnails.forEach((thumb, i) => {
thumb.onclick = () => {
currentIndex = i;
updateBackground(i);
};
});
// Set initial background
updateBackground(currentIndex);
</script>
</body>
</html>
以上是使用 html css 和 javascript 编码的图像滑块 https://www.instagram.com/webstreet_code/的详细内容。更多信息请关注PHP中文网其他相关文章！
