css点击箭头换照片

CSS点击箭头换照片的方法，可以让我们轻松实现图片轮播的效果，提升网页的用户体验。下面我们来看一下具体的实现方法：

HTML代码：
<div class="slider">
  <img src="image1.png" id="slider-img">
  <div class="prev" onclick="prev()"><img src="arrow-left.png"></div>
  <div class="next" onclick="next()"><img src="arrow-right.png"></div>
</div>
CSS代码：
.slider {
  position: relative;
  width: 500px;
  margin: 0 auto;
}
.prev, .next {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.prev img, .next img {
  width: 100%;
}
.prev {
  left: 0;
}
.next {
  right: 0;
}
JS代码：
var images = ["image1.png", "image2.png", "image3.png"];
var i = 0;
function prev() {
  i--;
  if(i < 0) {
  
  i = images.length - 1;
}
  document.getElementById("slider-img").src = images[i];
}
function next() {
  i++;
  if(i >= images.length) {
  
  i = 0;
}
  document.getElementById("slider-img").src = images[i];
}
 

上述代码中，我们通过HTML中的标签来设置初始显示的图片，并通过class名为"prev"和"next"的

标签来实现前后箭头的显示。CSS中用position属性设置了这两个箭头在父容器中的绝对位置，并设置了箭头图片的宽度。在JS代码中，定义了一个字符串数组用来存储要轮播的图片，并定义了变量i来记录当前显示的图片位置。通过重写前后箭头的onclick事件，实现点击箭头时更新标签的src属性，从而换到下一张或上一张照片。