vue.js怎么实现图片轮播?就是一个图片隔一秒换一张,不用别的功能

JavaScript06

vue.js怎么实现图片轮播?就是一个图片隔一秒换一张,不用别的功能,第1张

你开个定时器,一秒换一个img的src不就行了?

随便写了个:

<div id="app">

<div class="pic">

<img :src="now" />

</div>

</div>

<script>

new Vue({

el:"#app",

data:{

pic:["./images/1.jpg","./images/2.jpg","./images/3.jpg","./images/4.jpg","./images/5.jpg"],

i:"0",

now:"./images/1.jpg",

},

mounted:function(){

  this.now=this.pic[0]

  var _this=this

     setInterval(function(){

      _this.i++

      _this.now=_this.pic[_this.i]

        if(_this.i>=_this.pic.length-1){

        _this.i=0

       }

     },1000)

},

methods:{

}

})

</script>

1.安装依赖

npm i swiper@5 --save

npm i vue-awesome-swiper@3 --save

版本不过高

2.在main文件里全局引入轮播图和css同时使用Vue.use来注册一个轮播图插件

3。在自己的组件文件夹中新建一个轮播图组件MySwiper.vue

4.把组件引用到app.vue文件中去并使用