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


Posted in Javascript onDecember 01, 2016

本文实例为大家分享了vue图片轮播的具体代码,供大家参考,具体内容如下

轮播图效果:

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

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

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
jQuery+JSON+jPlayer实现QQ空间音乐查询功能示例
Jun 17 Javascript
jquery选择器之属性过滤选择器详解
Jan 27 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
Vue实战之vue登录验证的实现代码
Oct 31 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
详解基于 Node.js 的轻量级云函数功能实现
Jul 08 Javascript
详解vue 命名视图
Aug 14 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
简单了解JavaScript作用域
Jul 31 Javascript
JQuery学习总结【一】
Dec 01 #Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
Dec 01 #Javascript
jQuery 如何实现一个滑动按钮开关
Dec 01 #Javascript
有趣的bootstrap走动进度条
Dec 01 #Javascript
微信小程序进行微信支付的步骤昂述
Dec 01 #Javascript
第一次接触神奇的前端框架vue.js
Dec 01 #Javascript
bootstrapValidator自定验证方法写法
Dec 01 #Javascript
You might like
新52大事件
2020/03/03 欧美动漫
php xml文件操作实现代码(二)
2009/03/20 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
node.js中的buffer.toString方法使用说明
2014/12/14 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
微信小程序 扎金花简单实例
2017/02/21 Javascript
详解基于 Nuxt 的 Vue.js 服务端渲染实践
2017/10/24 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
vue视频播放暂停代码
2019/11/08 Javascript
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python实现删除时保留特定文件夹和文件的示例
2018/04/27 Python
Python 互换字典的键值对实例
2019/02/12 Python
python实现批量转换图片为黑白
2020/06/16 Python
Python如何将字符串转换为日期
2020/07/31 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
总经理助理岗位职责
2013/11/08 职场文书
美术师范毕业生自荐信
2013/11/16 职场文书
商务日语毕业生自荐信
2013/11/23 职场文书
农村婚礼证婚词
2014/01/08 职场文书
《长相思》听课反思
2014/04/10 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
教师节倡议书
2014/08/30 职场文书
个人批评与自我批评材料
2014/10/17 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
2014年宣传部个人工作总结
2014/12/06 职场文书
公务员考察材料范文
2014/12/23 职场文书
工程部岗位职责
2015/02/10 职场文书
2015年行政工作总结范文
2015/04/09 职场文书
新郎父亲婚礼致辞
2015/07/27 职场文书
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
css3新特性的应用示例分析
2022/03/16 HTML / CSS