速进!!!教你用vue写轮播图

首先了解一下v-show和v-if的区别

  <div id="app">
        <h1 v-show="true">666</h1>
        <h1 v-if='true'>777</h1>
        <h1 v-show="false">666</h1>
        <h1 v-if='false'>777</h1>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {

                }
            },
            methods: {

            },
        })

然后我们打开控制台
速进!!!教你用vue写轮播图_第1张图片
可以看到v-show和v-if都为false的时候标签内容都是看不见的,只不过方式不同,v-show是将标签的dispaly属性设置为none,而v-if直接将标签销毁了,销毁标签比较消耗性能,因此v-if适合只执行一次的语句,如果频繁调用则会导致浏览器卡顿

接下来我们用v-show来做轮播图
直接上代码了,注释写在代码上

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .container{
            position: relative;
            justify-content: center;
            display: flex;
        }
        .indexes{
            position: absolute;
            bottom: 10px;
            display: flex;
            align-items: center;
            margin: 0 auto;
        }
        .indexes li{
            margin: 0 10px;
            border-radius: 50%;
            width: 12px;
            height: 12px;
            background: white;
        }
       .indexes li.active{
           background-color: red;
       }
       .crow{
           width: 20px;
           height: 30px;
           background-color: red;
           position: absolute;
       }
       .left{
           left: 200px;
           top: 200px;
       }
       .right{
           right: 200px;
           top: 200px;
       }
    </style>
</head>

<body>
    <div id="app">
        <div class="container">
            <div class="crow left" @click="prev()"></div>//点击往左事件
            <div class="crow right" @click='next()'></div>//点击往右事件

            <img :src="item" alt="" v-for="(item, index) in imgList" :key="index" v-show="index===imgindex">//一个for循环,循环data里面的数组,v-show控制显示第几张图
            <ul class="indexes">
                <li @mouseenter='hover(index)'  :class='{active:index===imgindex}' v-for="(item, index) in imgList">//轮播图小圆点设置鼠标经过事件
            </ul>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    imgindex: 0,//控制第几张图
                    timer:0,//console.log(timer),可以看出timer就是数字
                    imgList: [//轮播图图片地址
                        'http://p1.music.126.net/DFEGUuJnDA2skS47wuJu7w==/109951165034430863.jpg?imageView&quality=89',
                        'http://p1.music.126.net/YNsttgnWJqg7EifwqNcf3w==/109951165034965284.jpg?imageView&quality=89',
                        'http://p1.music.126.net/sJ5z4tk9gXqHdi5zKJ5fgA==/109951165034783306.jpg?imageView&quality=89',
                        'http://p1.music.126.net/ENqJBJnvFWO9JNlqJLCKdA==/109951165034286589.jpg?imageView&quality=89'
                    ]
                }
            },
            mounted() {
                this.run()
            },
            methods: {
                run(){//设置定时器让图动起来
                      this.timer=setInterval(() => {
                    if (++this.imgindex === this.imgList.length) {
                        this.imgindex = 0
                    }
                }, 2000);
                },
                hover(index){//鼠标经过事件
                    clearInterval(this.timer)
                    this.imgindex = index
                    this.run()//调用定时器从新开始轮播
                },
                prev(){//鼠标点击事件,往左切换
                    clearInterval(this.timer)
                    if (--this.imgindex<0) this.imgindex = this.imgList.length-1
                    this.run()//调用定时器从新开始轮播
                },
                next(){//鼠标点击事件,让右切换
                    clearInterval(this.timer)
                    if (++this.imgindex === this.imgList.length) this.imgindex = 0
                    this.run()//调用定时器从新开始轮播
                }
            },
        })
    </script>
</body>

</html>

你可能感兴趣的:(速进!!!教你用vue写轮播图)