Vue入门实现简单的轮播图效果

Vue入门实现简单的轮播图效果首先创建一个vue实例，准备图片素材数组，通过v-for循环绑定图片，轮播图的切换通过 v-show 判断下标的改变实现显示或隐藏。代码如下：<style>ul li {list-style: none;}.main {width: 500px;height: 300px;positi

zyynb

2643人浏览 · 2020-06-10 08:53:35

zyynb · 2020-06-10 08:53:35 发布

Vue入门实现简单的轮播图效果

首先创建一个vue实例，准备图片素材数组，通过v-for循环绑定图片，轮播图的切换通过 v-show 判断下标的改变实现显示或隐藏。
代码如下：

 <style>
        ul li {
            list-style: none;
        }
       
        .main {
            width: 500px;
            height: 300px;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .main img {
            height: 300px;
            width: 500px;
        }
    </style>
  <div id="app">
      <img :src="item" v-for="(item, i) in list" v-show="i===activeIndex">
   </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let zyy = new Vue({
            el: "#app",
            data() {
                return {
                     list: [
                        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg",
                        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2242212773,2792770847&fm=26&gp=0.jpg",
                        "http://img0.imgtn.bdimg.com/it/u=3973422992,68543740&fm=26&gp=0.jpg"
                    ],
                    activeIndex: 0,
                }
            },
            methods: {
            },
        })
    </script>

让轮播图切换方法，通过在methods中设置定时器让图片数组下标每秒加1实现。同时当图片走到最后一张时，让下标回到0实现轮回切换。

 methods: {
	 run() {
	        this.timer = setInterval(() => { //设置一个定时器
            this.activeIndex++  //让下标每秒加一实现切换效果
      //如果走到最后一张，让下标回到0
       if (this.activeIndex === this.list.length) this.activeIndex = 0
         }, 1000);
     }，
  mounted() {
       this.run()
	}

轮播图下的点切换效果。
1.根据图片数组list循环，有多少图片就有多少个点。
2.通过下标控制当前点背景样式变化:class="{active:i===activeIndex}"实现随轮播图切换。
3.为点添加mouseenter事件，当每次鼠标放在点上时先移除计时器让点停止切换，然后让当前鼠标所在的点激活active样式，随后再恢复计时器，让切换继续。
最终代码如下：

<style>
        ul li {
            list-style: none;
        }


        .dian {
            display: flex;
            position: absolute;
            bottom: 10px;
        }

        .dian li {
            width: 20px;
            height: 20px;
            background: #fff;
            margin: 0 10px;
            border-radius: 50%;
        }

        .dian li.active {
            background: blue;
        }

        .main {
            width: 500px;
            height: 300px;
            position: relative;
            display: flex;
            justify-content: center;
        }

        .main img {
            height: 300px;
            width: 500px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="main">
            <img :src="item" v-for="(item, i) in list" v-show="i===activeIndex">
            <ul class="dian">
                <li @mouseenter="hover(i)" :class="{active:i===activeIndex}" v-for="(item, i) in list"></li>
            </ul>
        </div>

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        let zyy = new Vue({
            el: "#app",
            data() {
                return {
                    activeIndex: 0,
                    timer: null,
                    list: [
                        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg",
                        "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2242212773,2792770847&fm=26&gp=0.jpg",
                        "http://img0.imgtn.bdimg.com/it/u=3973422992,68543740&fm=26&gp=0.jpg"
                    ],
                }
            },
            mounted() {
                this.run()
            },
            methods: {
                run() {
                    this.timer = setInterval(() => { //设置一个定时器
                        this.activeIndex++  //让下标每秒加一实现切换效果
                        //如果走到最后一张，让下标回到0
                        if (this.activeIndex === this.list.length) this.activeIndex = 0
                    }, 1000);
                },
                hover(i) { 
                    clearInterval(this.timer)//鼠标放上去时先移除定时器
                    this.activeIndex = i //让当前的标签active激活
                    this.run()  //随后再走定时器
                }
            },
        })
    </script>
</body>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^