document.addEventListener('DOMContentLoaded', function () { // 获取所有缩略图和主图元素 const thumbnails = document.querySelectorAll('.thumbnail'); const mainImage = document.getElementById('main-image'); const imageDescription = document.getElementById('image-description'); let currentIndex = 0; // 当前显示的索引 let autoPlayInterval = 3000; // 自动播放间隔（毫秒） let autoPlayTimeout; // 自动播放定时器 let isAutoPlayEnabled = true; // 自动播放开关 // 更新主图的功能 function updateMainImageFromThumbnail(index) { // 移除所有缩略图的选中状态 thumbnails.forEach(thumb => thumb.classList.remove('active')); // 设置当前缩略图为选中状态 thumbnails[index].classList.add('active'); // 更新主图 const imageSrc = thumbnails[index].getAttribute('data-main-image'); mainImage.src = imageSrc; imageDescription.textContent = thumbnails[index].getAttribute('data-description'); } // 自动播放功能 function autoPlay() { if (!isAutoPlayEnabled) return; clearInterval(autoPlayTimeout); autoPlayTimeout = setInterval(function () { currentIndex = (currentIndex + 1) % thumbnails.length; updateMainImageFromThumbnail(currentIndex); }, autoPlayInterval); } // 停止自动播放 function stopAutoPlay() { clearInterval(autoPlayTimeout); } // 切换缩略图的函数 window.switchThumbnail = function (direction) { currentIndex += direction; if (currentIndex < 0) { currentIndex = thumbnails.length - 1; } else if (currentIndex >= thumbnails.length) { currentIndex = 0; } updateMainImageFromThumbnail(currentIndex); }; // 为每个缩略图添加点击事件 thumbnails.forEach(function (thumbnail, index) { thumbnail.addEventListener('click', function () { currentIndex = index; updateMainImageFromThumbnail(index); stopAutoPlay(); if (isAutoPlayEnabled) setTimeout(autoPlay, 5000); // 5秒后恢复自动播放 }); }); // 初始化显示第一张图片 updateMainImageFromThumbnail(currentIndex); autoPlay(); // 启动自动播放 }); // 实现方案3的图片放大并随鼠标移动 document.addEventListener("DOMContentLoaded", function () { const zoomContainer = document.querySelector(".zoom-container"); const zoomImage = document.querySelector(".zoom-image"); zoomContainer.addEventListener("mousemove", function (e) { const { left, top, width, height } = zoomContainer.getBoundingClientRect(); const x = ((e.clientX - left) / width) * 100; const y = ((e.clientY - top) / height) * 100; zoomImage.style.transformOrigin = `${x}% ${y}%`; }); zoomContainer.addEventListener("mouseleave", function () { zoomImage.style.transformOrigin = "center"; }); });