您的位置：首页 > Web前端 > Vue.js

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

2016-12-01 14:57 976 查看

轮播图效果:

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前端组件学习教程》，欢迎大家学习阅读。

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

精彩专题分享：jQuery图片轮播 JavaScript图片轮播 Bootstrap图片轮播

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

您可能感兴趣的文章:

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue.js 图片轮播

相关文章推荐

新的分享

章节导航