js实现图片轮换显示,不单击下面的超链接时,图片自动切换,单击下面的超链接时,显示对应的大图

可以使用JavaScript和CSS来实现这个功能。首先，我们需要将所有的图片和超链接放在一个父元素中，然后使用CSS将所有的图片隐藏，只显示第一张图片。超链接使用CSS样式设置为按钮样式，可以使用CSS的:hover伪类来设置鼠标悬停时的效果。接下来，使用JavaScript来实现图片轮换和超链接点击事件的处理。

HTML代码：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">

  <div class="link-container">
    <a href="#" data-index="1">Image 1</a>
    <a href="#" data-index="2">Image 2</a>
    <a href="#" data-index="3">Image 3</a>
  </div>
</div>

CSS代码：

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}

.image-container img:first-of-type {
  display: block;
}

.link-container {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.link-container a {
  display: inline-block;
  padding: 5px 10px;
  background-color: #ccc;
  color: #fff;
  text-decoration: none;
  margin-right: 10px;
}

.link-container a:hover {
  background-color: #555;
}

JavaScript代码：

var currentIndex = 0;
var images = document.querySelectorAll('.image-container img');
var links = document.querySelectorAll('.link-container a');

function showImage(index) {
  images[currentIndex].style.display = 'none';
  images[index].style.display = 'block';
  currentIndex = index;
}

function nextImage() {
  var index = currentIndex + 1;
  if (index >= images.length) {
    index = 0;
  }
  showImage(index);
}

setInterval(nextImage, 3000);

for (var i = 0; i < links.length; i++) {
  links[i].addEventListener('click', function(event) {
    event.preventDefault();
    var index = parseInt(this.getAttribute('data-index')) - 1;
    showImage(index);
  });
}

解释一下代码：

首先定义了一个变量currentIndex，表示当前显示的图片的索引。然后使用document.querySelectorAll方法获取所有的图片和超链接元素。showImage函数用于显示指定索引的图片，同时隐藏当前显示的图片。nextImage函数用于自动切换图片，每隔3秒钟调用一次。为所有的超链接元素添加了一个点击事件处理函数，当点击时阻止默认事件，然后根据超链接的data-index属性值来确定要显示的图片的索引，并调用showImage函数来显示该图片。

这样就完成了图片轮换显示和超链接点击显示大图的功能。