如何在javascript中书写实现焦点图自动轮播的效果，要能运行出来，HTML，css ，JavaScript分开写

在JavaScript中实现焦点图自动轮播的效果通常会涉及到HTML、CSS和JavaScript的结合。下面是一个简单的示例，展示如何创建一个基础的焦点图轮播效果：

**HTML:**

<div class="slider-container">
  <div class="slide">
    <img src="image1.jpg" alt="Slide 1">
  </div>
  <div class="slide active">
    <img src="image2.jpg" alt="Slide 2 (current)">
  </div>
  <!-- Add more slides if needed -->
</div>
<button id="prev">上一张</button>
<button id="next">下一张</button>

**CSS:**

.slider-container {
  position: relative;
  width: 100%;
}

.slide {
  display: none;
  position: absolute;
  left: 0;
}

.active {
  display: block;
}

**JavaScript:**

// 获取元素
const slider = document.querySelectorAll('.slide');
let currentSlide = 0; // 当前显示的索引

// 添加点击事件监听器
document.getElementById('prev').addEventListener('click', function() {
  currentSlide--;
  if (currentSlide < 0) {
    currentSlide = slider.length - 1;
  }
  showSlide(currentSlide);
});

document.getElementById('next').addEventListener('click', function() {
  currentSlide++;
  if (currentSlide > slider.length - 1) {
    currentSlide = 0;
  }
  showSlide(currentSlide);
});

function showSlide(index) {
  slider.forEach(slide => slide.classList.remove('active'));
  slide = slider[index];
  slide.classList.add('active');
  // 如果需要动画效果，可以添加额外的CSS关键帧动画
}

这个例子中，我们有两个按钮分别控制上一张和下一张，通过改变`currentSlide`变量并调用`showSlide`函数来切换图片。为了实际运行起来，你需要将图片URL替换为实际的图片地址，并确保HTML、CSS和JavaScript文件都链接在一起。