>
Vue轮播图实现
2022年8月23日 15:33
前端
  • 216
  • 527
  • 64
  • 51

使用VUE来实现轮播图的功能开发 

源代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://unpkg.zhimg.com/axios/dist/axios.min.js"></script>
    <style>
    </style>
</head>
<body>
    <div id="app">
        <div style="width:500px"  >
            <img width="600" height="200"  v-for="(item, index) in banner" v-show="listIndex === index":key="index":src="item"/>
        </div>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                banner: ['https://img0.baidu.com/it/u=3872626532,690754956&fm=253&fmt=auto&app=138&f=JPEG?w=1024&h=320',
                    'https://img0.baidu.com/it/u=500430250,1313737643&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=267',
                    'https://img2.baidu.com/it/u=1724313134,4026433148&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=146'],
                listIndex:0,
            },
            methods: {
                setTimer: function () {
                    timer = setInterval(() => {
                        this.listIndex++;
                        if (this.listIndex == this.banner.length) {
                            this.listIndex = 0;
                        }
                    }, 2000)
                }
            },
            mounted(){
                this.setTimer();
            },
            created() {
            },
        })
    </script>
</body>
</html>


轮播图.jpg

全部留言 (0)
返回
顶部