基于vue.js实现图片轮播效果
更新时间:2016年12月2日 10:00 点击:1959
轮播图效果:
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前端组件学习教程》,欢迎大家学习阅读。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
下一篇: jstree的简单实例
相关文章
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
- 这篇文章主要教大家如何利用Bootstrap3制作图片轮播效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-05-14
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
- 这篇文章主要介绍了使用jQuery制作基础的Web图片轮播效果的实例,鼠标悬停时可停止而离开时可自动轮播,文中还介绍了一种使用zslider插件来实现的方法,比较犀利,需要的朋友可以参考下...2016-04-24
- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03
- 过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。...2017-01-26
- 这篇文章主要为大家详细介绍了vue.js表格分页示例,ajax异步加载数据...2016-10-20
- 这篇文章主要介绍了vue.js实现h5机器人聊天测试版,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-07-16
- 这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
这篇文章主要介绍了Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-17- 这篇文章主要为大家详细介绍了原生JS实现匀速图片轮播动画,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-10-20
- 第一次接触神奇的vue.js,主要了解一下v-model、v-if、v-else、v-show、v-for等,感兴趣的小伙伴们可以一起学习一下...2016-12-02
- 这篇文章主要为大家详细介绍了Vue.JS入门教程之事件监听,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 这篇文章主要介绍了jQuery动画效果图片轮播特效,图片可以进行左右轮播,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-01-14
- 本文给大家分享的是个人在使用vue.js制作的文章和评论的分页组件,并使用webpack打包起来,这里推荐给大家,有需要的小伙伴可以参考下...2016-07-01
- 这篇文章主要为大家详细介绍了Vue.js第三天的学习笔记,vue.js计算属性computed,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02