Vue轮播图加定时器，实现自动轮播

最新推荐文章于 2023-04-10 17:36:19 发布

简简单单的前端

最新推荐文章于 2023-04-10 17:36:19 发布

阅读量955

点赞数 1

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/m0_46896340/article/details/124941128

版权

<!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>
        img {
            width: 100%;
        }
    </style>
</head>
<body>
    <div id="root">
        <h2>当前值：{{n}}</h2>
        <button @click="lBtn">点我上一张</button>
        <button @click="rBtn">点我下一张</button>
        <div class="pic">
            <div v-show="n === 0"><img src="../img/0.png" alt=""></div>
            <div v-show="n === 1"><img src="../img/1.png" alt=""></div>
            <div v-show="n === 2"><img src="../img/2.png" alt=""></div>
        </div>
    </div>

    <script src="../lib/vue.min.js"></script>
    <script>
        new Vue({
            el:'#root',
            data: {
                n:0,
                timer:' '
            },
            mounted() {//页面加载完成后执行方法（启动定时器）
            　　clearInterval(this.timer)
                this.setTimer()
            },
            //distroyed: function () {//页面关闭后关闭定时器（并没用）
                //  console.log('distroyed')
            　//　clearInterval(this.timer)
            //},
            beforeDestroy() {//页面关闭前关闭定时器 （这个才有用）
                clearInterval(this.timer)
            },
            methods: {
                setTimer: function () {
            　　　　this.timer = setInterval(this.rBtn,3000);
            　　},
                lBtn() {
                    if(this.n>0){
                        this.n--
                    }
                    else {
                        this.n = 2
                    }
                },
                rBtn() {
                    if(this.n<2){
                        this.n++
                    }
                    else {
                        this.n = 0
                    }
                },
            },
        })
    </script>
</body>
</html>

简简单单的前端

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
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.
复制链接

扫一扫