本文实例为大家分享了vue图片轮播的具体代码，供大家参考，具体内容如下

轮播图效果：

1.html

2.js

export default {

components: {

},

ready: function() {

var _this=this;

var timer = setInterval(function() {

if(_this.shufflingId>=0&&_this.shufflingId<_this.shufflingdata.length-1>

_this.shufflingId=parseInt(_this.shufflingId)+1;

}

else if (_this.shufflingId==_this.shufflingData.length-1) {

_this.shufflingId=0;

}

}, 5000)

},

methods: {

bulletFunOne:function(){

this.shufflingId=0;

},

bulletFunTwo:function(){

this.shufflingId=1;

},

bulletFunThree:function(){

this.shufflingId=2;

},

showPreNext:function(){

this.PreNext=true;

},

hiddenPreNext:function(){

this.PreNext=false;

},

preFun:function(){

var _this=this;

if(_this.shufflingId>0&&_this.shufflingId<_this.shufflingdata.length>

_this.shufflingId=parseInt(_this.shufflingId)-1;

}

},

nextFun:function(){

var _this=this;

if(_this.shufflingId>=0&&_this.shufflingId<_this.shufflingdata.length-1>

_this.shufflingId=parseInt(_this.shufflingId)+1;

}

}

},

data() {

return {

shufflingData:[{

title:'喵来个米',

href:'1',

url:'/xxx/xx/src/img/1.png'

},

{

title:'豆豆',

href:'2',

url:'/xxx/xx/src/img/2.png'

},{

title:'猫咪咪',

href:'3',

url:'/xxx/xx/src/img/3.jpg'

}],

shufflingId:0,

PreNext:false,

}

}

}

3.css

.fouce {

position: relative;

left:380px;

overflow: hidden;

height: 570px;

width: 1100px;

}

.fl {

float: left;

}

.focus{

overflow: hidden;

}

.fouce ul {

position: absolute;

}

.fouce ul li {

float: left;

}

.fouce ul li a.img {

display: block;

height: 520px;

}

.showimg{

width:1440px;

left:-0px;

}

.showimg img {

display: block;

width:1100px;

height:520px;

}

.fouce .bullet-pagination {

position: absolute;

bottom: 50px;

}

.fouce ul li h3 {

height: 40px;

line-height: 40px;

background-color: #ededed;

text-align: center;

font-size: 25px;

width: 1100px;

}

.bullet-pagination {

width: 100%;

text-align: center;

padding-top: 16px;

clear: both;

overflow: hidden;

}

.bullet {

display: inline-block;

background: #fff;

width: 12px;

height: 12px;

border-radius: 6px;

-webkit-border-radius: 6px;

margin-right: 5px;

opacity: 0.8;

-webkit-transition: opacity 0.8s linear;

-moz-transition: opacity 0.8s linear;

-ms-transition: opacity 0.8s linear;

-o-transition: opacity 0.8s linear;

transition: opacity 0.8s linear;

}

.bullet.active {

background: #007cdb;

opacity: 1;

cursor: pointer;

}

.preNext {

display: block;

width: 31px;

height: 41px;

position: absolute;

top: 200px;

cursor: pointer;

}

.pre {

background: url('/xxx/xx/src/img/news_arr_r.png') no-repeat right center;

}

.next {

background: url('/xxx/xx/src/img/news_arr_r.png') no-repeat left center;

right: 0px;

}

* {

padding: 0;

margin: 0;

list-style: none;

}

a{

text-decoration: none;

}

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。