基于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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
javascript高亮效果的二种实现方法
Sep 14 Javascript
JavaScript在XHTML中的用法详解
Apr 11 Javascript
JavaScript创建类/对象的几种方式概述及实例
May 06 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
如何解决ligerUI布局时Center中的Tab高度大小
Nov 24 Javascript
js与applet相互调用的方法
Jun 22 Javascript
js 中rewrap-ajax.js插件实例代码
Oct 20 Javascript
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
小程序组件之自定义顶部导航实例
Jun 12 Javascript
js中let能否完全替代IIFE
Jun 15 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
php&amp;java(二)
2006/10/09 PHP
PHP中使用memcache存储session的三种配置方法
2014/04/05 PHP
php实现按文件名搜索文件的远程文件查找器
2014/05/10 PHP
php中获取主机名、协议及IP地址的方法
2014/11/18 PHP
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
教你如何自定义百度分享插件以及bshare分享插件的分享按钮
2014/06/20 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jQuery.prop() 使用详解
2015/07/19 Javascript
js实现基于正则表达式的轻量提示插件
2015/08/29 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
vue.js提交按钮时进行简单的if判断表达式详解
2018/08/08 Javascript
小程序视频或音频自定义可拖拽进度条的示例代码
2018/09/30 Javascript
ElementUI radio组件选中小改造
2019/08/12 Javascript
详解webpack的文件监听实现(热更新)
2020/09/11 Javascript
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
[01:04:09]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第二场 2月2日
2021/03/11 DOTA
python抓取并保存html页面时乱码问题的解决方法
2016/07/01 Python
python实现数据图表
2017/07/29 Python
python Celery定时任务的示例
2018/03/13 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python中for循环变量作用域及用法详解
2019/11/05 Python
python 字段拆分详解
2019/12/17 Python
python实现快速文件格式批量转换的方法
2020/10/16 Python
Python中BeautifulSoup通过查找Id获取元素信息
2020/12/07 Python
非常震撼的纯CSS3人物行走动画
2016/02/24 HTML / CSS
html5调用摄像头功能的实现代码
2018/05/07 HTML / CSS
html5跨域通讯之postMessage的用法总结
2013/11/07 HTML / CSS
办公室主任竞聘演讲稿
2014/05/15 职场文书
股东授权委托书范文
2014/09/13 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
反邪教教育心得体会
2016/01/15 职场文书
解析Java异步之call future
2021/06/14 Java/Android
「魔法少女伊莉雅」美游粘土人开订
2022/03/21 日漫
mysql数据库隔离级别详解
2022/06/16 MySQL
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers