Vue实现轮播图

Vue实现轮播图先上总代码<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=devic

天赐细莲

9727人浏览 · 2021-07-15 15:22:11

天赐细莲 · 2021-07-15 15:22:11 发布

Vue实现轮播图

在这里插入图片描述

先上总代码

<!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">
    <!-- <link rel="stylesheet" href="css/mycss.css" type="text/css" media="screen" /> -->
    <title>Vue实现轮播图</title>

    <style>
        /* 获取id用#    获取class用. */
        body {
            margin: 0 0;
            background-color: darkgray;
        }

        #app {
            /*border: 1px solid red;*/
            margin: 10% auto;
            width: 840px;
            height: 620px;
        }

        #picture {
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 0;
        }

        .left {
            float: left;
            margin-left: 2.3%;
        }

        .right {
            float: right;
            margin-right: 2.3%;
        }

        .left,
        .right {
            margin-top: -300px;
            opacity: 0.5;
        }
    </style>

</head>

<body>

    <div id="app">
        <img id="picture" :src="pic" alt="素材图片" />
        <img class="left" v-show='showLeft' @click="prevHandler" :src="left" alt="" />
        <img class="right" v-show='showRight' @click="nextHandler" :src="right" alt="" />
    </div>

    <!-- CDN    必须联网 -->
    <!-- 引入时会生成一个Vue()的全局变量 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        //创建一个Vue对象
        var vm = new Vue({
            //挂载点
            el: '#app',
            //数据
            data: {
                pic: 'images/01.jpg',       //进入页面直接显示的图片
                showLeft: false,            //左箭头life
                showRight: true,            //右箭头life
                right: 'images/next.png',   //左箭头图片
                left: 'images/prev.png',    //右箭头图片
                begin: 1,                   //图片起始编号
                end: 4,                     //图片最终编号
                idx: 1                      //图片当前编号
            },
            //方法
            methods: {
                //点击左箭头
                prevHandler: function () {
                    if (this.idx > this.begin) {
                        this.idx--;
                    }
                    this.showLeft = this.idx !== this.begin;
                    this.showRight = true;
                    this.pic = 'images/0' + this.idx + '.jpg';
                },
                //点击右箭头
                nextHandler: function () {
                    if (this.idx < this.end) {
                        this.idx++;
                    }
                    this.showLeft = true;
                    this.showRight = this.idx !== this.end;
                    this.pic = 'images/0' + this.idx + '.jpg';
                }
            }
        });
    </script>
</body>

</html>

CSS

css部分由于个人操作不太熟悉，且本网页布局相对简单，这里并不做过多解释

HTML

html的基本骨架也很简单，直接在创建一个div并在里面放三个img即可。

    <div id="app">
        <img id="picture" :src="pic" alt="素材图片" />
        <img class="left" v-show='showLeft' @click="prevHandler" :src="left" alt="" />
        <img class="right" v-show='showRight' @click="nextHandler" :src="right" alt="" />
    </div>

v-show 根据真假切换元素的显示状态,原理修改元素的dispaly，实现显示隐藏,数据改变之后，对应的元素的状态同步更新

v-on:click 简写为**@click**（v-on指令的作用是绑定事件，简写为@）

v-bind:src 缩写为**:src** (v-bing指令的作用是绑定属性，简写为:)

JavaScript

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

CDN 必须联网

引入时会生成一个Vue()的全局变量

//创建一个Vue的对象
var vm = new Vue({
            //挂载点
            el: '#app',
            //数据
            data: {
                pic: 'images/01.jpg',       //进入页面直接显示的图片
                showLeft: false,            //左箭头life
                showRight: true,            //右箭头life
                right: 'images/next.png',   //左箭头图片
                left: 'images/prev.png',    //右箭头图片
                begin: 1,                   //图片起始编号
                end: 4,                     //图片最终编号
                idx: 1                      //图片当前编号
            },
            //方法
            methods: {
                //点击左箭头
                prevHandler: function () {
                    if (this.idx > this.begin) {
                        this.idx--;
                    }
                    this.showLeft = this.idx !== this.begin;
                    this.showRight = true;
                    this.pic = 'images/0' + this.idx + '.jpg';
                },
                //点击右箭头
                nextHandler: function () {
                    if (this.idx < this.end) {
                        this.idx++;
                    }
                    this.showLeft = true;
                    this.showRight = this.idx !== this.end;
                    this.pic = 'images/0' + this.idx + '.jpg';
                }
            }
        });

版本2

此处只放thml和JavaScript代码

这里用了数组的方法实现，理解了上面的版本1，再看版本2应该会很好理解

<body>
    <div id="app">
        <div class="center">
            <h2>Vue轮播图_版本2</h2>
            <img :src="imgList[index]" alt="">
            <a href="javascript:void(0)" @click="prev" v-show="index > 0" class="left">
                <img src="images/prev.png" alt="">
            </a>
            <a href="javascript:void(0)" @click="next" v-show="index < imgList.length-1" class="right">
                <img src="images/next.png" alt="">
            </a>
        </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script>
        var vm = new Vue({
            data: {
                imgList: [
                    'images/01.jpg',
                    'images/02.jpg',
                    'images/03.jpg',
                    'images/04.jpg'
                ],
                //数组下标从0开始
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next () {
                    this.index++;
                }
            }
        });
        //手动挂载
        vm.$mount('#app');
    </script>

</body>