Vue入门必备：轻松学会图片依次动态展示技巧

1. 准备工作

1.1 创建Vue项目

使用Vue CLI创建一个新的Vue项目：

vue create my-project

进入项目目录：

cd my-project

1.2 安装依赖

npm install vue-lazyload --save

2. 实现图片依次动态展示

2.1 数据准备

data() {
  return {
    images: [
      'https://example.com/image1.jpg',
      'https://example.com/image2.jpg',
      'https://example.com/image3.jpg',
      // ...更多图片URL
    ],
    currentIndex: 0, // 当前展示的图片索引
  };
},

2.2 模板编写

<template>
  <div class="image-container">
    <img :src="images[currentIndex]" class="image" />
  </div>
</template>

2.3 样式设置

<style>
.image-container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.image {
  width: 100%;
  height: auto;
  transition: opacity 1s ease-in-out;
}
</style>

2.4 控制图片切换

methods: {
  nextImage() {
    this.currentIndex = (this.currentIndex + 1) % this.images.length;
  },
},

2.5 自动播放

为了实现自动播放的效果，我们可以使用setInterval函数：

mounted() {
  this.autoPlay();
},
methods: {
  autoPlay() {
    setInterval(() => {
      this.nextImage();
    }, 3000); // 3秒切换一次图片
  },
},

3. 总结