css点击箭头图片切换

CSS点击箭头图片切换是一种常见的网页效果，它可以让用户通过点击箭头来切换图片内容。这种效果通常使用CSS实现，因为CSS具有方便、简单和易用的特点。

.arrow {
  
  display: inline-block;
  
  width: 20px;
  
  height: 20px;
  
  background: url('arrow.png') no-repeat;
}
#image1, #image2, #image3 {
  
  display: none;
}
#image1.visible, #image2.visible, #image3.visible {
  
  display: block;
}
 

以上的代码中，我们定义了一个箭头类(.arrow)，它设置了箭头图片的大小和背景。在图片展示的部分，我们使用了HTML标签来显示不同的图片(#image1、#image2、#image3)。接着，通过CSS将这些图片设置为不可见，最后通过给可见图片添加.visible类，来使它们显示。

<div>
  
  <img id="image1" src="image1.jpg" class="visible">
  
  <img id="image2" src="image2.jpg">
  
  <img id="image3" src="image3.jpg">
  
  <div class="arrow arrow-left" onclick="switchImage(-1)"></div>
  
  <div class="arrow arrow-right" onclick="switchImage(+1)"></div>
</div> 

在HTML部分，我们创建了一个容器

function switchImage(offset) {
  
  var visibleImage = document.querySelector('.visible');
  
  var images = document.querySelectorAll('img');
  
  var index = Array.prototype.indexOf.call(images, visibleImage);
  
  var nextIndex = index + offset;
  
  if (nextIndex < 0) {
  
   
   nextIndex = images.length - 1;
  
}
 else if (nextIndex >= images.length) {
  
   
   nextIndex = 0;
  
}
  
  visibleImage.classList.remove('visible');
  
  images[nextIndex].classList.add('visible');
}