带缩略图的横向焦点图片轮换JavaScript

在JavaScript中创建带缩略图的横向焦点图片轮换效果，通常会用到HTML、CSS和jQuery库。以下是一个简单的步骤说明：

1. **HTML结构**:
- 主图片容器(`.main-image`): 包含一组大图，并设置初始显示的图片。
- 缩略图容器(`.thumbnail-container`): 包含所有缩略图，每张缩略图都有相应的数据属性对应主图。

<div class="main-image">
  <img src="image1.jpg" data-index="0" alt="主图1">
</div>
<div class="thumbnail-container">
  <a href="#" data-index="0"><img src="thumb1.jpg" alt="缩略图1"></a>
  <!-- ...更多缩略图 -->
</div>

2. **CSS样式**:
- 设置基本布局和样式，比如浮动布局，让主图和缩略图水平排列。
- 使用伪元素`:nth-child(n)`控制当前聚焦状态。

.main-image {
  position: relative;
}

.thumbnail-container {
  display: flex;
  justify-content: center;
}

3. **JavaScript (jQuery)**:
- 使用jQuery库来实现轮播功能，比如使用`.next()`切换主图，`.siblings()`获取对应的缩略图。

$(document).ready(function() {
  var currentIndex = 0;

  function showImage(index) {
    $('.main-image img').eq(index).fadeIn('slow');
    $('.thumbnail a').removeClass('active');
    $('#thumbnail-' + index).addClass('active');
  }

  showImage(currentIndex);

  $('.thumbnail a').click(function(e) {
    e.preventDefault();
    var targetIndex = $(this).data('index');
    currentIndex = targetIndex;
    showImage(targetIndex);
  });

  setInterval(() => {
    showImage((currentIndex + 1) % $('.main-image img').length);
  }, 3000); // 每隔3秒切换一次
});