vue实现轮播_轮播vue

作者：从前慢现在也慢 | 2024-03-16 17:45:18

踩

轮播vue


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/common.css">
    <link rel="stylesheet" href="font/iconfont.css">
    <script src="js/vue.js"></script>
    <script src="js/index3.js"></script>
<body>
<!--页面容器-->
  <div class="index-content" id="my">
    <div class="banner">
        <img v-for="(img,index) in imgs" :src="img" v-show="num==index"/>
        <div class="banner-circle">
            <ul>
                <li v-for="(value,index) in imgs" :class="{'selected':num==index}"></li> 
            </ul> 
        </div>
    </div>
</body>
</html>


window.onload = function () {
    //vue实现轮播
    new Vue({
        el: '#my',//挂载元素，说白了就是在id=my的div里使用下面的vue
        data: {//所有的变量、数据都得写在data里
            num:0,
            imgs: [//用数组存放要轮播的图片
                'img/banner1.jpg',
                'img/banner2.jpg',
                'img/banner3.jpg',
                'img/banner4.jpg',
                'img/banner5.jpg'
            ]
        },
        mounted:function(){//mounted是vue实例挂载的事件钩子函数，所以它只会执行一次，之后就是play方法。
           this.play();
        },
        methods:{//vue中存放方法的地方
            autoPlay:function(){//num递增，num等于图片总数时回到第一张，其递增有下面的定时器实现
                const _self=this;
                _self.num++;
                if(_self.num == this.imgs.length){
                    _self.num=0;
                }
            },
            play:function(){//每隔一秒执行autoPlay，使得num递增
                setInterval(this.autoPlay,1000);
            }
        }
       
    });
}

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/从前慢现在也慢/article/detail/251113