快捷導(dǎo)航

基于vue.js實(shí)現(xiàn)圖片輪播效果

更新時(shí)間：2016年12月01日 14:57:34 作者：愛(ài)喝酸奶的吃貨

這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)圖片輪播效果，vue如何實(shí)現(xiàn)輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue圖片輪播的具體代碼，供大家參考，具體內(nèi)容如下

輪播圖效果：

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:'喵來(lái)個(gè)米',
 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前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專(zhuān)題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

精彩專(zhuān)題分享：jQuery圖片輪播 JavaScript圖片輪播 Bootstrap圖片輪播

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: