Vue 项目实战4-无缝轮播图

养成好习惯，先赞后看，感谢对作者大大的支持

一、话不多说，直接上效果图：

完整视频展示链接如下：

https://item.taobao.com/item.htm?ft=t&id=833405684191

二、实现思路

HTML结构

文档头部设置：定义了文档的基本元信息，包括字符集、视口和标题，并引入了Vue.js库。
样式链接和图标：链接了外部的CSS样式，并设置了网页的favicon图标。
轮播图容器：使用<div id="app">包裹整个内容，其中包含标题和轮播图的HTML结构。
- 标题：使用<h1>标签定义了一个居中、黑色的标题。
- 轮播图：由.carousel类的<div>作为外部容器，内部包括：
  - 图片容器：.carousel-images，使用Flex布局显示图片，并通过CSS的transform属性实现图片的平滑切换。
  - 图片：使用v-for指令循环渲染图片数组中的图片。
  - 控制按钮：.carousel-controls，包含左右切换按钮，使用:style绑定动态调整样式。

CSS样式

全局样式：定义了页面的背景渐变和字体。
轮播图样式：包括轮播图的尺寸、边框和阴影，以及图片的适应性和控制按钮的样式与动画。

JavaScript逻辑

Vue实例：
- 数据绑定：
  - images：一个由图片路径组成的数组，用于循环显示。
  - currentIndex：当前显示的图片索引。
- 方法：
  - prev：上一张图片切换逻辑，确保索引在数组范围内循环。
  - next：下一张图片切换逻辑，同样确保索引在数组范围内循环。

功能分析

动态图片切换：通过Vue的响应式系统，currentIndex的变化会触发图片容器的transform属性更新，实现平滑的图片切换。
无缝循环：prev和next方法中的逻辑确保了图片可以在数组的首尾无缝循环。

三、涉及Vue.js知识点

1. Vue实例创建与挂载

javascript">const { createApp } = Vue;
createApp({// 组件配置
}).mount('#app');

createApp：创建Vue应用实例。
mount：挂载到DOM元素。

2. 数据属性

javascript">data() {return {images: Array.from({ length: 75 }, (_, i) => `img/${i + 1}.jpg`),currentIndex: 0};
}

data：定义组件的数据属性。
images：图片数组，通过Array.from生成。
currentIndex：当前显示图片的索引。

3. 计算属性与方法

javascript">methods: {prev() {this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;},next() {this.currentIndex = (this.currentIndex + 1) % this.images.length;}
}

methods：定义组件的方法，用于处理逻辑。
prev与next：切换图片的方法，实现了图片的循环切换。

4. 指令与动态绑定

javascript"><div class="carousel-images" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">

v-bind:style或:style：动态绑定样式，用于平滑切换图片。

5. 条件渲染与循环

javascript"><img v-for="(image, index) in images" :key="index" :src="image" alt="Carousel Image">

v-for：循环渲染图片数组中的图片。
v-bind:key或:key：为每个元素提供唯一标识符。

6. 事件监听

javascript"><button @click="prev">◀</button>
<button @click="next">▶</button>

v-on:click或@click：绑定事件处理函数。

这些知识点共同作用，使得轮播图组件能够响应用户操作，动态加载和切换图片。

四、全部代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>无缝轮播图【小匠开发铺】</title><script src="https://unpkg.com/vue@3.2.47/dist/vue.global.js"></script><link rel="icon" type="image/png" href="../img/logo.png"><style>body {font-family: Arial, sans-serif;background: linear-gradient(135deg, #f5f7fa, #c3cfe2);margin: 0;padding: 0;}.title{text-align: center;color: #000000;}.carousel {position: relative;width: 60%;margin: 50px auto;overflow: hidden;border-radius: 20px;box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);background: #fff;border: 1px solid #ddd;}.carousel-images {display: flex;transition: transform 0.8s ease-in-out;}.carousel-images img {width: 100%;border-radius: 20px;object-fit: cover;}.carousel-controls {position: absolute;top: 50%;width: 100%;display: flex;justify-content: space-between;transform: translateY(-50%);}.carousel-controls button {background: rgba(0, 0, 0, 0.5);border: none;color: white;font-size: 28px;padding: 10px 15px;cursor: pointer;border-radius: 50%;transition: background 0.3s ease, transform 0.3s ease;}.carousel-controls button:hover {background: rgba(0, 0, 0, 0.7);transform: scale(1.1);}</style>
</head>
<body><div id="app"><h1 class="title">无缝轮播图【小匠开发铺】</h1><div class="carousel"><div class="carousel-images" :style="{ transform: `translateX(-${currentIndex * 100}%)` }"><img v-for="(image, index) in images" :key="index" :src="image" alt="Carousel Image"></div><div class="carousel-controls"><button @click="prev">◀</button><button @click="next">▶</button></div></div></div><script>const { createApp } = Vue;createApp({data() {return {images: Array.from({ length: 75 }, (_, i) => `img/${i + 1}.jpg`),currentIndex: 0};},methods: {prev() {this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;},next() {this.currentIndex = (this.currentIndex + 1) % this.images.length;}}}).mount('#app');</script>
</body>
</html>