Vue -- 图片切换

最新推荐文章于 2024-07-02 11:16:42 发布

小王的进阶之路

最新推荐文章于 2024-07-02 11:16:42 发布

阅读量173

点赞数

分类专栏：前端 Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_43712409/article/details/119716363

版权

Vue.js 图片轮播 JavaScript 前端开发 DOM操作

关键词由CSDN通过智能技术生成

前端同时被 2 个专栏收录

56 篇文章 0 订阅

订阅专栏

Vue

13 篇文章 0 订阅

订阅专栏

<!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>Document</title>
    <style>
        #app {
            position: relative;
            width: 600px;
            height: 440px;
        }

        .left {
            position: absolute;
            left: 0;
            top: 190px;
        }

        .w60 {
            width: 60px;
            height: 60px;
        }

        .right {
            position: absolute;
            right: 0;
            top: 190px;
        }
    </style>
</head>

<body>
    <div id="app">
        <img :src="imgArr[index]" alt="">
        <!-- 左箭头 -->
        <a href="javascript:void(0)" class="left" @click="prev" v-show="index > 0">
            <img src="./images/left-circle.png" class="w60" alt="">
        </a>
        <!-- 右箭头 -->
        <a href="javascript:void(0)" class="right" @click="next" v-show="index < imgArr.length-1">
            <img src="./images/right-circle.png" class="w60" alt="">
        </a>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                imgArr: [
                    "./images/00.jpg",
                    "./images/01.jpg",
                    "./images/02.jpg",
                    "./images/03.jpg",
                    "./images/04.jpg",
                ],
                index: 0
            },
            methods: {
                prev: function () {
                    this.index--;
                },
                next: function () {
                    this.index++;
                }
            }
        })
    </script>
</body>

</html>

小王的进阶之路

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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"> <title>Do
复制链接

扫一扫

专栏目录