vue实现轮播图

最新推荐文章于 2024-02-27 17:44:00 发布

（→_→）

最新推荐文章于 2024-02-27 17:44:00 发布

阅读量2.1k

点赞数

文章标签： vue js vue.js

本文链接：https://blog.csdn.net/guoxiaoxuan1997/article/details/104148952

版权

使用vuejs实现轮播图

一、原理

1.点击左右按钮切换图片
首先，图片src是动态变化的，需要使用v-bind动态绑定，缩写为“：”。
然后，为左右按钮点击事件（click）添加事件监听，v-on，缩写为“@”。
再次，将点击事件绑定方法（methods），通过index–和index++实现图片下标的变化。
2.首页和末页按钮的显示问题
给a标签添加v-show条件语句。当下标index不为0时，左按钮显示；当下表小于图片数组长度时，右按钮显示。

二、效果图

1.第一页只有右侧按钮显示，可点击。
第一张只能点击右按钮
2.中间页左右两侧按钮都显示，且可点击。

中间页两侧按钮都显示
3.末页只有左侧按钮显示，可点击。

在这里插入图片描述

三、代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            position: absolute;
            margin:auto;
            top: 50%;
            left: 50%;
            transform:translate(-50%,-50%);
            border: 1px solid black;
        }
        .theImg{
            width: 300px;
            float: left;
        }
        #app a:hover{
            background-color: rgba(0,0,0,0.7);
        }
        .arrow{
            position: absolute;
            top:120px;
            z-index: 999;
            font-size: 40px;
            color: #fff;
            background-color: rgba(0,0,0,0.3);
            width: 40px;
            text-align: center;
            border-radius: 10%;
        }
        .pre{
            left:0px;
        }
        .next{

            right: 0px;

        }
    </style>
</head>
<body>
    <div id="app">
        <a href="#" @click="prev" v-show="index!=0" class="pre arrow">&lt;</a>
        <img :src="imgArr[index]" class="theImg">
        <a href="#" @click="next" v-show="index<imgArr.length-1" class="next arrow">&gt;</a>
    </div>
    <script src="javascript/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                imgArr:[
                    "img/1.jpg",
                    "img/2.jpg",
                    "img/3.jpg",
                    "img/4.jpg",
                    "img/5.jpg",
                    "img/6.jpg",

                ],
                index:0,
            },
            methods:{
                prev:function(){
                    this.index--;
                },
                next:function(){
                    this.index++;
                }
            }
        })
    </script>


</body>
</html>

注：vue.js文件需要自行引入，图片文件也需要自行引入。

（→_→）

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
vue实现轮播图

使用vuejs实现轮播图一、原理1.点击左右按钮切换图片首先，图片src是动态变化的，需要使用v-bind动态绑定，缩写为“：”。然后，为左右按钮点击事件（click）添加事件监听，v-on，缩写为“@”。再次，将点击事件绑定方法（methods），通过index–和index++实现图片下标的变化。2.首页和末页按钮的显示问题给a标签添加v-show条件语句。当下标index不为0...
复制链接

扫一扫