养成好习惯，先赞后看，感谢对作者大大的支持
一、话不多说，直接上效果图：
完整视频展示链接如下：
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>
