Marquee图片画廊开发求助：实现点击图片停止移动并高亮功能

我明白你现在遇到的问题啦——用<marquee>标签做滚动画廊的时候，没法单独让选中的图片停下来、同时保持其他图片继续滚动，确实有点棘手。毕竟<marquee>是把整个容器里的内容当成一个整体来控制的，根本没法单独操作里面的某一张图片的滚动状态。不过别担心，咱们换掉<marquee>，用JavaScript自己实现自定义滚动逻辑，就能完美实现你要的效果啦！

• 抛弃<marquee>，用普通div做滚动容器，给每个图片设置绝对定位
• 用JavaScript控制每个图片的位置，实现滚动动画
• 点击图片时，给它添加高亮样式、标记为停止状态，同时把它放大显示到上方区域
• 未被选中的图片继续保持滚动逻辑

HTML结构 #

<!-- 上方放大预览区域 -->
<div id="preview-container">
  <img id="preview-img" src="" alt="预览图" style="display: none;">
</div>

<!-- 滚动画廊容器 -->
<div id="gallery-container">
  <div class="gallery-item">
    <img src="你的图片1地址" alt="图片1">
  </div>
  <div class="gallery-item">
    <img src="你的图片2地址" alt="图片2">
  </div>
  <div class="gallery-item">
    <img src="你的图片3地址" alt="图片3">
  </div>
  <!-- 可继续添加更多图片项 -->
</div>

CSS样式 #

/* 预览区域样式 */
#preview-container {
  width: 80%;
  margin: 20px auto;
  height: 300px;
  border: 2px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#preview-img {
  max-width: 100%;
  max-height: 100%;
}

/* 画廊容器样式 */
#gallery-container {
  width: 100%;
  height: 120px;
  border: 1px solid #eee;
  overflow: hidden;
  position: relative;
}

/* 单个图片项样式 */
.gallery-item {
  position: absolute;
  top: 10px;
  width: 100px;
  height: 100px;
  margin-right: 15px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/* 选中图片的高亮样式 */
.gallery-item.selected {
  border: 3px solid #2196F3;
  transform: scale(1.1);
  z-index: 10;
}

JavaScript逻辑 #

const galleryContainer = document.getElementById('gallery-container');
const galleryItems = document.querySelectorAll('.gallery-item');
const previewImg = document.getElementById('preview-img');

// 存储每个图片的位置和滚动状态
let itemStates = [];
const scrollSpeed = 1; // 滚动速度，数值越大滚动越快

// 初始化每个图片的初始位置和状态
galleryItems.forEach((item, index) => {
  itemStates.push({
    element: item,
    x: index * 115, // 100px图片宽度 + 15px间距，计算初始位置
    isStopped: false
  });
  
  // 绑定点击事件
  item.addEventListener('click', () => handleItemClick(item, index));
});

// 处理图片点击事件
function handleItemClick(targetItem, index) {
  // 移除所有图片的选中状态
  galleryItems.forEach(item => item.classList.remove('selected'));
  // 给当前点击的图片添加高亮样式
  targetItem.classList.add('selected');
  
  // 更新上方预览图
  previewImg.src = targetItem.querySelector('img').src;
  previewImg.style.display = 'block';
  
  // 标记当前图片为停止滚动状态
  itemStates[index].isStopped = true;
}

// 滚动动画核心函数
function animateScroll() {
  itemStates.forEach(state => {
    if (!state.isStopped) {
      // 未停止的图片继续向左移动
      state.x -= scrollSpeed;
      // 当图片完全移出容器左侧时，重置到容器右侧，实现循环滚动
      if (state.x < -100) {
        state.x = galleryContainer.offsetWidth;
      }
    }
    // 更新图片的位置
    state.element.style.left = `${state.x}px`;
  });
  
  // 持续调用动画函数
  requestAnimationFrame(animateScroll);
}

// 启动滚动动画
animateScroll();

1. 滚动控制：通过requestAnimationFrame实现流畅的滚动动画，每个图片的位置单独维护，只有未标记为isStopped的图片会继续移动。
2. 高亮效果：点击时给图片添加selected类，通过CSS的边框和缩放效果实现视觉高亮，同时设置z-index确保选中图片在最上层。
3. 循环滚动：当图片完全移出容器左侧时，把它的位置重置到容器右侧，实现无限滚动的效果。
4. 自定义调整：如果需要修改滚动速度，调整scrollSpeed数值即可；如果要修改图片大小或间距，同步调整CSS里的.gallery-item宽高、margin，以及JS里初始化位置的115（图片宽度+间距）即可。

内容的提问来源于stack exchange，提问作者raman singh