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

架构师ZYL

已于 2024-09-21 15:07:45 修改

阅读量1k

点赞数 22

分类专栏： vue实战项目文章标签： vue.js 前端 javascript

于 2024-09-21 15:07:21 首次发布

本文链接：https://blog.csdn.net/2301_81807150/article/details/142302426

版权

vue实战项目专栏收录该内容

2 篇文章 0 订阅

订阅专栏

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

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

完整视频展示链接如下：

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>