html css js焦点图轮播 鼠标点击时显示相应图片

要实现鼠标点击时显示相应图片的焦点图轮播，可以在JS部分添加事件监听器，监听每个控制按钮的点击事件，然后根据当前点击的按钮的索引值来切换轮播项。

以下是一个示例代码：

const sliderItems = document.querySelectorAll('.slider-item');
const controlBtns = document.querySelectorAll('.slider-control button');
let currentIndex = 0;
let timer = null;

// 切换轮播项函数
function changeSlider(index) {
  // 移除所有轮播项的active状态
  sliderItems.forEach((item) => {
    item.classList.remove('active');
  });

  // 设置当前轮播项的active状态
  sliderItems[index].classList.add('active');
}

// 遍历控制按钮，添加点击事件监听器
for (let i = 0; i < controlBtns.length; i++) {
  controlBtns[i].addEventListener('click', function() {
    // 获取当前点击的按钮的索引值
    const index = parseInt(this.getAttribute('data-index'));

    // 切换轮播项
    changeSlider(index);

    // 更新当前轮播项的索引值
    currentIndex = index;

    // 停止定时器
    clearInterval(timer);

    // 重新开始定时器
    timer = setInterval(playSlider, 3000);
  });
}

// 开始轮播
timer = setInterval(playSlider, 3000);

function playSlider() {
  // 切换到下一个轮播项
  currentIndex++;
  if (currentIndex >= sliderItems.length) {
    currentIndex = 0;
  }

  // 切换轮播项
  changeSlider(currentIndex);
}

在HTML部分，需要为每个控制按钮添加一个data-index属性，用于标识该按钮对应的轮播项的索引值。在CSS部分，需要设置控制按钮的样式，如大小、边框、背景色等。

<div class="slider">
  <div class="slider-item active">
    <img src="image1.jpg" alt="image1">
    <h3>标题1</h3>
  </div>
  <div class="slider-item">
    <img src="image2.jpg" alt="image2">
    <h3>标题2</h3>
  </div>
  <div class="slider-item">
    <img src="image3.jpg" alt="image3">
    <h3>标题3</h3>
  </div>
  ...

  <div class="slider-control">
    <button data-index="0"></button>
    <button data-index="1"></button>
    <button data-index="2"></button>
    ...
  </div>
</div>

.slider-control button {
  width: 16px;
  height: 16px;
  border: 1px solid #ccc;
  background-color: #fff;
  margin-right: 10px;
  cursor: pointer;
}

.slider-control button.active {
  background-color: #333;
  border-color: #333;
  color: #fff;
}