养成好习惯，先赞后看，感谢对作者大大的支持
一、话不多说，直接上效果图：
完整视频展示链接如下：
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实例创建与挂载
const { createApp } = Vue;
createApp({// 组件配置
}).mount('#app');
createApp：创建Vue应用实例。mount：挂载到DOM元素。
2. 数据属性
data() {return {images: Array.from({ length: 75 }, (_, i) => `img/${i + 1}.jpg`),currentIndex: 0};
}
data：定义组件的数据属性。images：图片数组，通过Array.from生成。currentIndex：当前显示图片的索引。
3. 计算属性与方法
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. 指令与动态绑定
<div class="carousel-images" :style="{ transform: `translateX(-${currentIndex * 100}%)` }">
v-bind:style或:style：动态绑定样式，用于平滑切换图片。
5. 条件渲染与循环
<img v-for="(image, index) in images" :key="index" :src="image" alt="Carousel Image">
v-for：循环渲染图片数组中的图片。v-bind:key或:key：为每个元素提供唯一标识符。
6. 事件监听
<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>
![[大语言模型-论文精读] 以《黑神话：悟空》为研究案例探讨VLMs能否玩动作角色扮演游戏？](https://i-blog.csdnimg.cn/direct/021d851465354e3f80c5323e06490265.png)
