幻灯图，缩略图按钮模式代码

admin · 发表于 2025-1-6 23:00:04

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幻灯相册</title>
<style>
body {
font-family: Arial, sans-serif;
}
#gallery {
display: flex;
overflow: hidden;
width: 100%px;
height: 650px;
position: relative;
margin: auto;
}
#gallery img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
#thumbnails {
display: flex;
overflow-x: auto;
white-space: nowrap;
position: absolute;
bottom: 10px;
width: 100%;
justify-content: center;
}
#thumbnails img {
width: 100px;
height: 75px;
margin: 0 5px;
cursor: pointer;
border: 2px solid transparent;
}
#thumbnails img.active {
border-color: #333;
}
#description {
position: absolute;
top: 10px;
left: 10px;
background: rgba(0, 0, 0, 0.5);
color: white;
padding: 5px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="gallery">
<img src="https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg" alt="图片1" data-desc="这是图片1的描述">
<img src="https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg" alt="图片2" data-desc="这是图片2的描述">
<img src="https://pic1.imgdb.cn/item/67715fd0d0e0a243d4ec3386.jpg" alt="图片3" data-desc="这是图片3的描述">
</div>
<div id="thumbnails">
<img src="https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg" alt="缩略图1">
<img src="https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg" alt="缩略图2">
<img src="https://pic1.imgdb.cn/item/67715fd0d0e0a243d4ec3386.jpg" alt="缩略图3">
</div>
<div id="description"></div>
<script>
const gallery = document.getElementById('gallery');
const images = gallery.getElementsByTagName('img');
const thumbnails = document.getElementById('thumbnails').getElementsByTagName('img');
const description = document.getElementById('description');
let currentIndex = 0;
let intervalId;
function showImage(index) {
for (let i = 0; i < images.length; i++) {
images[i].style.display = 'none';
thumbnails[i].classList.remove('active');
}
images[index].style.display = 'block';
thumbnails[index].classList.add('active');
description.textContent = images[index].getAttribute('data-desc');
}
function startSlideshow() {
intervalId = setInterval(() => {
currentIndex = (currentIndex + 1) % images.length;
showImage(currentIndex);
}, 3000); // 每3秒切换一次图片
}
function stopSlideshow() {
clearInterval(intervalId);
}
for (let i = 0; i < thumbnails.length; i++) {
thumbnails[i].addEventListener('click', () => {
stopSlideshow();
showImage(i);
startSlideshow();
});
}
showImage(currentIndex);
startSlideshow();
</script>
</body>
</html>

复制代码

醉美水芙蓉 · 发表于 2025-1-7 06:33:22

老大又整了个新代码，厉害了！

admin · 发表于 2025-1-7 17:58:45

醉美水芙蓉发表于 2025-1-7 06:33
老大又整了个新代码，厉害了！

简单代码，需要自己去整合

klxf · 发表于 2025-1-8 13:02:28

不可动？

落寞 · 发表于 2025-1-12 17:46:44

赞一个!

活跃概况 · 发表于 2025-1-13 16:57:55

学习了，这就去试试

红尘过客 · 发表于 2025-1-14 21:01:52

还是看不懂，复杂

夏艳妍 · 发表于 2025-1-14 21:32:37

支持一下，期待更多东西

幻灯图，缩略图按钮模式代码

点评

浏览过的版块

最佳新人

活跃会员

热心会员

推广达人

宣传达人

灌水之王

突出贡献

优秀版主

荣誉管理

论坛元老