帮我用java scripts写一个焦点图的代码

当然可以，以下是一个简单的焦点图实现代码：

HTML代码:

<div class="slider-container">
  <ul class="slider-list">
    <li class="slider-item"><img src="image1.jpg"></li>
    <li class="slider-item"><img src="image2.jpg"></li>
    <li class="slider-item"><img src="image3.jpg"></li>
  </ul>
</div>

CSS代码:

.slider-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 300px;
}

.slider-list {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.slider-item {
  position: relative;
  float: left;
  width: 100%;
  height: 100%;
}

JavaScript代码:

var sliderIndex = 0; // 当前显示的图片索引
var sliderTimer = null; // 定时器

var sliderList = document.querySelector('.slider-list');
var sliderItems = document.querySelectorAll('.slider-item');

// 按钮点击事件
function handleSliderBtnClick(index) {
  sliderIndex = index;
  showSlider();
}

// 显示指定图片
function showSlider() {
  // 隐藏所有图片
  for (var i = 0; i < sliderItems.length; i++) {
    sliderItems[i].style.display = 'none';
  }
  // 显示当前图片
  sliderItems[sliderIndex].style.display = 'block';
}

// 自动轮播
function autoSlider() {
  sliderIndex++;
  if (sliderIndex >= sliderItems.length) {
    sliderIndex = 0;
  }
  showSlider();
  sliderTimer = setTimeout(autoSlider, 3000); // 3秒后继续轮播
}

// 初始化
function initSlider() {
  showSlider(); // 显示第一张图片
  sliderTimer = setTimeout(autoSlider, 3000); // 3秒后开始自动轮播
}

initSlider();

这个代码实现了一个简单的焦点图，每隔三秒自动轮播，同时提供了按钮可以手动切换图片。你需要将图片的路径替换成自己的图片路径来实现自己的焦点图。