首页教程软件教程正文

Vue系列入门教程（7）——实现简单轮播图

uncle 软件教程 2025年08月6日

0 收藏 0 点赞 701 浏览 2447 个字

摘要 :

我们现在将学习的Vue知识应用一下，去实现简单轮播图效果，下面我们来一起看一下实现过程。一、创建项目 1、在HBuildX中使用vue-cli创建vue项目，名为lbt 2、删除无用文……

我们现在将学习的Vue知识应用一下，去实现简单轮播图效果，下面我们来一起看一下实现过程。

一、创建项目

1、在HBuildX中使用vue-cli创建vue项目，名为lbt
2、删除无用文件，如图：

3、修改index.html如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>演示轮播图</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

4、修改App.vue如下（清空组件、模板、样式）：

<template>
  <div id="app">
  </div>
</template>

<script>

export default {
  name: 'app',
  components: {
      
  }
}
</script>

<style>
</style>

5、修改main.js，去掉Vue.config.productionTip = false即可

以上基本项目准备已经完成。

二、开始开发

1、在assets目录下，新建images文件夹，从网上下载几张图片，放在其中，以便演示,我这里从淘宝首页下载了3张，大小520*280

2、在assets目录下，新建style目录，在目录中新建名为global.css的全局样式文件，内容如下

*{
    padding: 0;
    margin: 0;
}

3、在main.js中导入全局样式

//导入全局样式
import './assets/style/global.css'

注意一定要以./开头。
4、在components目录下新建名为Lbt.vue的轮播图组件

5、在Lbt.vue中输入vbase快速创建组件基础模板：

模板代码如下：

<template>
    <div>

    </div>
</template>

<script>
    export default {
        
    }
</script>

<style scoped>

</style>

6、开始开发轮播图组件，代码如下：

<template>
    <!-- 轮播图模板 -->
    <div class="out">
        <div class="btn btn-left" @click="prePic"><</div>
        <img class="pic" :src="pics[num].imgUrl" alt=""/>
        <div class="btn btn-right" @click="nextPic">></div>
    </div>
</template>

<script>
    // 默认导出组件
    export default {
        name:'Ltb',
        data(){
            return{
                // 记录图片数组索引
                num: 0,
                // 图片数组，图片地址绑定需要使用require
                pics: [
                        {imgUrl:require("../assets/images/pic1.jpg")},
                        {imgUrl:require("../assets/images/pic2.jpg")},
                        {imgUrl:require("../assets/images/pic3.jpg")},
                     ]
            }
        },
        methods:{
            // 上一个图片
            prePic(){
                if(this.num == 0){
                    this.num = this.pics.length-1;
                }else{
                    this.num--;
                }
            },
            // 下一个图片
            nextPic(){
                if(this.num == this.pics.length-1){
                    this.num = 0;
                }else{
                    this.num++;
                }
            }
        }
    }
</script>
<!-- 组件样式代码 scoped限制样式范围只在该组件有效-->
<style scoped>
.out {
    width: 520px;
    height: 280px;
    margin: 100px auto;
    position: relative;
}
.out .btn {
    width: 30px;
    height: 60px;
    color: white;
    background: rgba(0,0,0,0.3);
    position: absolute;
    top: calc(50% - 30px);
    line-height: 60px;
    text-align: center;
    font-size: 20px;
    font-family: "宋体";
    cursor: pointer;
}
.out .btn-left {
    left: 0;
}
.out .btn-right {
    right: 0;
}
</style>

注意：使用vue-cli，在template中图片如果使用绑定方式，则在data中的图片地址必须要使用require引入之后才能显示，否则无法显示，因为vue-cli会将图片打包到img目录下。但是如果在temeplate中直接引用如下：
<img class=”pic” src=”../assets/images/pic1.jpg” alt=””/>
是能够正常显示的。

7、在App.vue中引入、注册、使用Lbt.vue组件

<template>
  <div id="app">
      <!--3、使用组件 -->
      <Lbt></Lbt>
  </div>
</template>

<script>
// 1、导入组件
import Lbt from './components/Lbt.vue'
export default {
  name: 'app',
  ///2、注册组件
  components: {
      Lbt
  }
}
</script>

<style>
</style>

8、运行到浏览器访问，成功实现轮播效果

9、我们这里只实现了点击轮播，有兴趣的可以再自行实现自动轮播效果