vue轮播图

//与轮播图相关

            change (i) {

                this.mark = i

            },

            autoPlay () {

                this.mark++;

                if (this.mark === 4) { //当遍历到最后一张图片置零

                    this.mark = 0

                }

            },

            play () {

                this.timer = setInterval(this.autoPlay, 2500)

            },

            stop () {

                clearInterval(this.timer)

            },

            move () {

                this.timer = setInterval(this.autoPlay, 2500)

            }

 

 

 

mounted() {

            this.play();

        }

 

 

<div class="bar pull-left">

<div

class="barpic-wrap pull-left"

v-for="(item, index) in imgArray"

v-on:mouseover="change(index)"

:class="{ 'active':index===mark,'pull-right':index === 2 }"

:key="index" style="margin: 10px">

<img :src='item.url'>

<div class="introduce">

<span class="dots top-dots"></span>

{{item.name}}

<span class="dots bottom-dots"></span>

</div>

</div>

</div>

<div class="slideshow pull-left m-t-10 p-l-10">

<ul>

<li

class="pull-left slide-item"

v-for="(img, index) in imgArray"

v-show="index===mark"

:key="index">

</li>

</ul>

</div>