基于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之文件操作
Mar 07 Javascript
动态刷新 dorado树的js代码
Jun 12 Javascript
用js来解决ajax读取页面乱码
Nov 28 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
javascript操作excel生成报表示例
May 08 Javascript
原生js轮播特效
May 18 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
Jun 28 Javascript
JS面向对象之单选框实现
Jan 17 Javascript
深度解读vue-resize的具体用法
Jul 08 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
各种战术和打法的原创者
2020/03/04 星际争霸
php eval函数用法 PHP中eval()函数小技巧
2012/10/31 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
php定时执行任务设置详解
2015/02/06 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
Yii2中SqlDataProvider用法示例
2016/09/22 PHP
类似php的js数组的in_array函数自定义方法
2013/12/27 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
JavaScript中最常见的三个面试题解析
2017/03/04 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
ionic 3.0+ 项目搭建运行环境的教程
2017/08/09 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
详解Vue CLI 3.0脚手架如何mock数据
2018/11/23 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
[37:02]OG vs INfamous 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python中的包和模块实例
2014/11/22 Python
Python计算程序运行时间的方法
2014/12/13 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
Python后台开发Django会话控制的实现
2019/04/15 Python
pandas中DataFrame修改index、columns名的方法示例
2019/08/02 Python
如何基于Python实现数字类型转换
2020/02/07 Python
基于python求两个列表的并集.交集.差集
2020/02/10 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
美国知名运动产品零售商:Foot Locker
2016/07/23 全球购物
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
运动会通讯稿500字
2014/02/20 职场文书
励志演讲稿200字
2014/08/21 职场文书
领导班子四风表现材料
2014/08/23 职场文书
张家口市高新区党工委群众路线教育实践活动整改方案
2014/10/25 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
vue 给数组添加新对象并赋值
2022/04/20 Vue.js
什么是css原子化,有什么用?
2022/04/24 HTML / CSS