vue快速入门(八) 之轮播图的切换

最新推荐文章于 2023-02-20 22:29:47 发布

一口木桶饭

最新推荐文章于 2023-02-20 22:29:47 发布

阅读量770

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_44415928/article/details/104904710

版权

vue 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

还是利用之前的方法,设置左右两个按钮,点击它们,分别让图片列表的下表变化就可以
在这里插入图片描述

<body>
    <div id="app">
        <img src="./zuo.jpg" alt="" height="100px" width="100px" v-show="index > 0" @click="left">
        <img :src="imgSrc[index]" alt="" height="300px" width="500px">
        <img src="./you.jpg" alt="" height="100px" width="100px" v-show="index < imgSrc.length-1" @click="right">
        <!--
			这里我们分别设置了左右图标和中间的主图片,其中左右图标设置是否展示以及点击它们,index变大变小的函数
			主图片的位置则是利用图片数组来遍历图片
		-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",

            data: {
                isShow1: false,
                isShow2: true,
                index: 0,
                imgSrc: [
                    "./ironman1.png",
                    "./ironman2.png",
                    "./ironman3.png",
                    "./ironman4.png"
                ]
                
            },

            methods: {
                left: function() {
                    this.index -= 1
                },

                right: function() {
                    this.index += 1
                }
            }
        })
    </script>
</body>

可以看到我们定义了imgSrc图片列表,里边是一个个的图片,然后利用:src="imgSrc[index]"来遍历每一个图片
然后设置左右切换的图标,绑定左右函数,然后判断是否展示
如果index 为0那么做图标不显示,如果右图标为图片数组长度减一 ,那么右图标不显示
实现效果如下

在这里插入图片描述

一口木桶饭

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue快速入门(八) 之轮播图的切换

还是利用之前的方法,设置左右两个按钮,点击它们,分别让图片列表的下表变化就可以<body> <div id="app"> <img src="./zuo.jpg" alt="" height="100px" width="100px" v-show="index > 0" @click="left"> <i...
复制链接

扫一扫

专栏目录