基于vue.js实现图片轮播效果
轮播图效果: 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 <div class="jb51code">
本文已被整理到了《》,欢迎大家学习阅读。 关于vue.js组件的教程,请大家点击专题进行学习。 精彩专题分享: 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |