Vue项目中实现图片手动翻页效果，纯css写法 无引用插件,详细写法

在Vue项目中实现图片手动翻页的效果，纯CSS编写可以通过创建一个响应式的容器，并结合伪元素和绝对定位来实现。这里是一个简化的步骤和代码示例：

1. 首先，创建一个包含多个图片的`<div>`作为主容器，每个图片可以用`<img>`标签表示：

<div class="slider-container">
  <img src="image1.jpg" alt="Slide 1" v-for="(item, index) in slides" :key="index" :style="{ backgroundImage: `url(${item.src})`, opacity: index === currentIndex ? '1' : '0.5' }"/>
</div>

在这个例子中，`slides`是一个数组，存储了所有图片的URL。

2. 定义CSS样式，包括滑动区域、指示器和切换按钮：

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

.slide {
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.5s ease-in-out;
  display: none;
}

.slide.active {
  display: block;
}

.indicator {
  position: absolute;
  bottom: 10px;
  right: 10px;
  list-style-type: none;
}

.indicator li {
  cursor: pointer;
  margin-right: 5px;
}

3. 然后，为导航按钮和当前索引变量添加Vue绑定：

<button @click="prevSlide">Previous</button>
<button @click="nextSlide">Next</button>
<p>Current Slide: {{ currentIndex + 1 }}</p>

<script>
export default {
  data() {
    return {
      slides: [...], // 图片数组
      currentIndex: 0,
    };
  },
  methods: {
    prevSlide() {
      if (this.currentIndex > 0) {
        this.currentIndex--;
      }
    },
    nextSlide() {
      const slideCount = this.slides.length;
      if (this.currentIndex < slideCount - 1) {
        this.currentIndex++;
      }
    },
  },
};
</script>

4. 当点击切换按钮时，更新对应的图片opacity并改变当前索引。