基于vue.js实现图片轮播效果
版权申诉
145 浏览量
2020-10-20
23:52:45
上传
评论
收藏 36KB PDF 举报
基于基于vue.js实现图片轮播效果实现图片轮播效果
主要为大家详细介绍了基于vue.js实现图片轮播效果，vue如何实现轮播图效果,具有一定的参考价值，感兴趣的
小伙伴们可以参考一下
轮播图效果:
1.html
<template>
<div class="shuffling">
<div class="fouce fl">
<div class="focus">
<ul class="showimg">
<template v-for='sd in shufflingData'>
<li v-if='shufflingId==$index' v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext'>
<a target="_blank" title="{{sd.title}}" class="img" href="{{sd.href}}"><img alt="{{sd.title}}" v-bind:src="sd.url"/></a>
<h3><a target="_blank" title="{{sd.title}}" href="{{sd.href}}">{{sd.title}}</a></h3>
</li>
</template>
</ul>
<div class='bullet-pagination'>
<a class="bullet" v-bind:class="{'active': shufflingId==0}" v-on:click='bulletFunOne'></a>
<a class="bullet" v-bind:class="{'active': shufflingId==1}" v-on:click='bulletFunTwo'></a>
<a class="bullet" v-bind:class="{'active': shufflingId==2}" v-on:click='bulletFunThree'></a>
</div>
<div v-show='PreNext' class="preNext pre" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='preFun'></div>
<div v-show='PreNext' class="preNext next" v-on:mouseover='showPreNext' v-on:mouseout='hiddenPreNext' v-on:click='nextFun'></div>
</div>
</div>
</div>
</template>
2.js
<script>
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;
资源评论
