基于vue.js实现图片轮播效果

轮播图效果:

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; } } }, 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, } }}</script>

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前端组件学习教程》，欢迎大家学习阅读。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。