带缩列图的图片轮播动画，请难难老师将他控制住！
本帖最后由 亚伦影音工作室 于 2025-1-8 12:35 编辑 <br /><br /><style>#papa{margin: 10px -420px;
width: 1400px;
height: 740px;
background:url('https://pic1.imgdb.cn/item/65db15629f345e8d03a78591.jpg') no-repeat center/cover;
box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
position: relative;overflow: hidden;
z-index: 12345;}
#gallery {z-index: 1;
display: flex;
overflow: hidden;
width: 100%;font-family: Arial, sans-serif;
height: 100%;
position: relative;
margin: auto;
}
#gallery img {
width: 100%;
height: 100%;
transition: transform 0.5s ease;
}
#thumbnails {z-index: 10;
display: flex;
overflow-x: auto;
white-space: nowrap;
position: absolute;
bottom: 10px;
width: 100%;
justify-content: center;
}
#thumbnails img {
width: 120px;
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>
<div id="papa">
<div id="gallery">
<img src="https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg" alt="图片1" data-desc="">
<img src="https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg" alt="图片2" data-desc="">
<img src="https://pic1.imgdb.cn/item/67715fd0d0e0a243d4ec3386.jpg" alt="图片3" data-desc="">
<img src="https://pic.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg" alt="图片4" data-desc="">
<img src="https://pic.imgdb.cn/item/671d8d6ed29ded1a8cbe9b99.jpg" alt="图片5" data-desc="">
<img src="https://pic.imgdb.cn/item/67162d45d29ded1a8c2fc41d.jpg" alt="图片6" data-desc="">
<img src="https://pic.imgdb.cn/item/67162cc8d29ded1a8c2e8fa0.jpg" alt="图片7" data-desc="">
<img src="https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg" alt="图片8" data-desc="">
<img src="https://pic.imgdb.cn/item/6713a87cd29ded1a8ccbc781.jpg" alt="图片9" data-desc="">
</div>
<div id="thumbnails">
<img src="https://pic1.imgdb.cn/item/67334a1bd29ded1a8c90061b.jpg" alt="图片1" data-desc="">
<img src="https://pic1.imgdb.cn/item/6775f8d6d0e0a243d4ed9e3e.jpg" alt="图片2" data-desc="">
<img src="https://pic1.imgdb.cn/item/67715fd0d0e0a243d4ec3386.jpg" alt="图片3" data-desc="">
<img src="https://pic.imgdb.cn/item/671d8e6dd29ded1a8cbf3d68.jpg" alt="图片4" data-desc="">
<img src="https://pic.imgdb.cn/item/671d8d6ed29ded1a8cbe9b99.jpg" alt="图片5" data-desc="">
<img src="https://pic.imgdb.cn/item/67162d45d29ded1a8c2fc41d.jpg" alt="图片6" data-desc="">
<img src="https://pic.imgdb.cn/item/67162cc8d29ded1a8c2e8fa0.jpg" alt="图片7" data-desc="">
<img src="https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg" alt="图片8" data-desc="">
<img src="https://pic.imgdb.cn/item/6713a87cd29ded1a8ccbc781.jpg" alt="图片9" data-desc="">
</div>
<div id="description"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1942740960.mp3" loop autoplay></audio>
<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.style.display = 'none';
thumbnails.classList.remove('active');
}
images.style.display = 'block';
thumbnails.classList.add('active');
description.textContent = images.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.addEventListener('click', () => {
stopSlideshow();
showImage(i);
startSlideshow();
});
}
showImage(currentIndex);
startSlideshow();
</script>
<script>
papa.onclick = () => aud.paused ? aud.play() : aud.pause();
</script> 不知道需要控制什么，等着看看学学{:4_204:} 这个没有看见播放器啊
页:
[1]