vue.js轮播图组件使用方法详解


Posted in Javascript onJuly 03, 2018

 之前用jQuery写过轮播组件,用的jquery动画实现的图片滑动效果。这个组件的滑动特效是原生js搭配vue的数据绑定实现的,不依赖其他库,虽然可以再vue.js中引入swiper,但是引入类库的最大的缺点就是冗余代码太多,所以还是自己写一个比较好,简单扼要。(ps:组件的宽高设置还有有点小bug,子组件中需要改为用js动态修改container的宽高,另外可能还有其他地方有不合理之处,欢迎各位批评指正)

github地址:git@github.com:cainiao222/vueslider-components.git

父组件代码:

<template>
 <div>
 <slider :img="img" :width="width" :height="height"></slider>
 </div>

</template>

<script>
// import swiper from 'swiper'

 import slider from './slider1.vue'


 export default {

 data(){
 return {
 img:[{src:require('../assets/slideShow/pic1.jpg'),name:'hehe1'},
  {src:require('../assets/slideShow/pic2.jpg'),name:'hehe2'},
  {src:require('../assets/slideShow/pic3.jpg'),name:'hehe3'},
  {src:require('../assets/slideShow/pic4.jpg'),name:'hehe4'}
 ],
 width:460,
 height:250
 }
 },

 components:{
 slider:slider
 }
 }
</script>

子组件代码:

<template>
 <div class="box">
 <div @mouseenter="endInterval" @mouseleave="startInterval" class="container">
 <div :style="{width:wrap_width+'px',height:wrap_height+'px',left:offset_left+'px'}" class="slider-wrap">
 <div class='img' v-for="item in slider_des">
  <img :src="item.src" alt="">
 </div>
 </div>
 <div class="bottom">
 <ul class="pointContainer">
  <li @click="changeIndex(index)" :class="{point:true,active:nowIndex===index}" v-for="(point,index) in length"></li>
 </ul>
 </div>
 <div @click="pre" class="click pre"><</div>
 <div @click="next" class="click next">></div>
 </div>
 </div>
</template>

<script>
 export default {
 props:{
 img:{
 type:Array,
 default:[]
 },
 width:{
 type:Number,
 default:460
 },
 height:{
 type:Number,
 default:250
 }
 },

 mounted(){
 this.startInterval();
 },

 data(){
 console.log(this.width);
 return{
 length:new Array(this.img.length),
 nowIndex:0,
 wrap_width:this.width*(this.img.length+2),
 wrap_height:this.height,
 offset_left:-this.width,
 isTransition:true,
 timer:null,
 animateFlag:true,
 timerAuto:null
 }
 },
 computed:{
 slider_des:function () {
 var arr=[];
 var arr1=arr.concat(this.img);
 arr1.push(this.img[0]);
 arr1.unshift(this.img[this.img.length-1]);
 return arr1;
 }
 },
 methods:{
 pre(){
 if(this.nowIndex===0){
  if(!this.animateFlag){
  clearInterval(this.timer);
  this.animateFlag=true;
  this.offset_left=-(this.length.length)*this.width;
  }
  this.animate(-this.width,0,function (that) {
  that.offset_left=-(that.length.length)*that.width;
  });
  this.nowIndex=this.img.length-1;
  return
 }else{
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-(this.nowIndex*this.width);
  }
  this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex*this.width));
 }
 this.nowIndex-=1;
 },
 startInterval(){
 this.timerAuto=setInterval(this.next,2000);
 },
 endInterval(){
// console.log("leave");
 clearInterval(this.timerAuto);
 },
 next(){
 if(this.nowIndex===this.length.length-1){
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-this.width;
  }
  this.animate(-(this.length.length)*this.width,-(this.length.length+1)*this.width,function (that) {
  that.offset_left=-that.width;
  });
  this.nowIndex=0;
  return
 }else{
  if(!this.animateFlag){
  this.animateFlag=true;
  clearInterval(this.timer);
  this.offset_left=-(this.nowIndex+2)*this.width;
  }
  this.animate(-(this.nowIndex+1)*this.width,-(this.nowIndex+2)*this.width);
  this.nowIndex+=1;
 }
 },
 animate(start,end,fuc){
 var distance=end-start;
 var pre_dis=distance/50;
 var that=this;
 this.timer=setInterval(function () {
  that.animateFlag=false;
  if(Math.abs(end-that.offset_left)<=Math.abs(pre_dis)){
  that.offset_left=end;
  if(fuc){
  fuc(that);
  }
  that.animateFlag=true;
  clearInterval(that.timer);
  that.timer=null;
  return
  }
  that.offset_left+=pre_dis;
 },1);
 },
 changeIndex(index){
 clearInterval(this.timer);
 this.animate(-(this.nowIndex+1)*this.width,-(index+1)*this.width);
 this.nowIndex=index;
 }
 }
 }
</script>


<style scoped>
 *{
 margin: 0;
 list-style: none;
 /*height: 0;*/
 }
 .box{
 position: relative;
 }
 .container{
 width: 460px;
 height: 250px;
 margin: 0 auto;
 border: 1px solid #3bb4f2;
 overflow: hidden;
 left: 0;
 top: 0;
 position: absolute;
 }

 .slider-wrap{
 /*width: 2760px;*/
 /*height: 250px;*/
 position: absolute;
 /*left: -460px;*/
 /*overflow: hidden;*/
 top: 0;
 }

 .transition{
 transition: 0.5s;
 }

 .img{
 width: 460px;
 height: 250px;
 float: left;
 display: inline;
 }

 img{
 width: 460px;
 height: 250px;
 /*float: left;*/
 }

 .click{
 width: 20px;
 background-color: rgba(255,255,255,.3);
 color: aliceblue;
 font-weight: bold;
 position: absolute;
 height: 40px;
 line-height: 40px;
 margin-top: -20px;
 top: 50%;
 cursor: pointer;
 }

 .pre{
 left: 0;
 }
 .next{
 right: 0;
 }
.bottom{
 position: absolute;
 bottom: 0;
 width: 100%;
 height: 20px;
 text-align: center;
}

 .pointContainer{
 height: 20px;
 }

 .point{
 display: inline-block;
 border: 5px solid #eeeeee;
 border-radius: 5px;
 line-height: 0;
 margin-right: 3px;
 }

 .active{
 border: 5px solid #42b983;
 }

</style>

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

Javascript 相关文章推荐
newxtree.js代码
Mar 13 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
Sep 28 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
jquery教程限制文本框只能输入数字和小数点示例分享
Jan 13 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
jQuery实现点击水纹波动动画
Apr 10 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
全面了解JavaScript的作用域链
Apr 03 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
vue数据更新UI不刷新显示的解决办法
Aug 06 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 #Javascript
解析vue data不可以使用箭头函数问题
Jul 03 #Javascript
详解Vue SPA项目优化小记
Jul 03 #Javascript
jQuery实现表单动态添加与删除数据操作示例
Jul 03 #jQuery
JS实现显示当前日期的实例代码
Jul 03 #Javascript
jQuery实现获取form表单内容及绑定数据到form表单操作分析
Jul 03 #jQuery
vue 设置路由的登录权限的方法
Jul 03 #Javascript
You might like
js限制checkbox勾选的个数以及php获取多个checkbbox的方法深入解析
2013/07/18 PHP
php将字符串随机分割成不同长度数组的方法
2015/06/01 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
Laravel5.1框架注册中间件的三种场景详解
2019/07/09 PHP
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
jquery 新建的元素事件绑定问题解决方案
2014/06/12 Javascript
WEB前端设计师常用工具集锦
2014/12/09 Javascript
jQuery中first()方法用法实例
2015/01/06 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
基于jQuery实现Tabs选项卡自定义插件
2016/11/21 Javascript
js倒计时小实例(多次定时)
2016/12/08 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
react高阶组件添加和删除props
2019/04/26 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
2020/01/02 Javascript
node爬取新型冠状病毒的疫情实时动态
2020/02/06 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Python实现的排列组合计算操作示例
2017/10/13 Python
Python实现基于C/S架构的聊天室功能详解
2018/07/07 Python
pandas 转换成行列表进行读取与Nan处理的方法
2018/10/30 Python
NumPy 基本切片和索引的具体使用方法
2019/04/24 Python
python如何实现代码检查
2019/06/28 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
python MultipartEncoder传输zip文件实例
2020/04/07 Python
利用HTML5 Canvas制作键盘及鼠标动画的实例分享
2016/03/15 HTML / CSS
马来西亚户外装备商店:PTT Outdoor
2019/07/13 全球购物
美国农场商店:Blain’s Farm & Fleet
2020/01/17 全球购物
人力资源管理专业求职信
2014/07/23 职场文书
放飞梦想演讲稿800字
2014/08/26 职场文书
发布会邀请函
2015/01/31 职场文书
怀孕辞职信怎么写
2015/02/28 职场文书
使用python创建股票的时间序列可视化分析
2022/03/03 Python
面试中canvas绘制图片模糊图片问题处理
2022/03/13 Javascript
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python