js实现选中缩略图
选中缩略图的实现方法
通过JavaScript实现选中缩略图功能，可以通过DOM操作和事件监听完成。以下是几种常见方法：
方法一：通过类名切换实现选中效果
// 获取所有缩略图元素
const thumbnails = document.querySelectorAll('.thumbnail');
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', function() {
// 移除所有缩略图的选中类
thumbnails.forEach(item => item.classList.remove('active'));
// 为当前点击的缩略图添加选中类
this.classList.add('active');
});
});方法二：使用数据属性存储选中状态
const thumbnails = document.querySelectorAll('[data-thumbnail]');
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', function() {
// 重置所有缩略图状态
thumbnails.forEach(item => {
item.dataset.selected = 'false';
item.style.border = 'none';
});
// 设置当前缩略图为选中状态
this.dataset.selected = 'true';
this.style.border = '2px solid blue';
});
});方法三：结合主图切换功能
const thumbnails = document.querySelectorAll('.thumbnail');
const mainImage = document.getElementById('main-image');
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', function() {
// 更新主图源
mainImage.src = this.dataset.fullsize;
// 更新选中状态
document.querySelector('.thumbnail.active')?.classList.remove('active');
this.classList.add('active');
});
});样式处理建议
为选中状态添加CSS样式，增强视觉效果：
.thumbnail {
cursor: pointer;
opacity: 0.7;
transition: all 0.3s ease;
}
.thumbnail.active {
opacity: 1;
border: 2px solid #0066ff;
box-shadow: 0 0 8px rgba(0, 102, 255, 0.5);
}性能优化考虑
对于大量缩略图的情况，可以使用事件委托提高性能：
document.querySelector('.thumbnail-container').addEventListener('click', function(e) {
if (e.target.classList.contains('thumbnail')) {
const thumbnails = document.querySelectorAll('.thumbnail');
thumbnails.forEach(item => item.classList.remove('active'));
e.target.classList.add('active');
}
});这些方法可以根据实际需求进行调整和组合，实现不同风格的缩略图选中效果。
