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 相关文章推荐
9个JavaScript评级/投票插件
Jan 18 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
关于jQuery中的each方法(jQuery到底干了什么)
Mar 05 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
深入理解JavaScript系列(40):设计模式之组合模式详解
Mar 04 Javascript
JS验证IP,子网掩码,网关和MAC的方法
Jul 02 Javascript
Bootstrap文件上传组件之bootstrap fileinput
Nov 25 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
迅速了解一下ES10中Object.fromEntries的用法使用
Mar 05 Javascript
sortable+element 实现表格行拖拽的方法示例
Jun 07 Javascript
vue实现图片裁剪后上传
Dec 16 Vue.js
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
substr()函数中文版
2006/10/09 PHP
简单的PHP缓存设计实现代码
2011/09/30 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
jQuery示例收集
2010/11/05 Javascript
JavaScript基本编码模式小结
2012/05/23 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
javascript页面倒计时实例
2015/07/25 Javascript
EasyUI布局 高度自适应
2016/06/04 Javascript
Highcharts入门之简介
2016/08/02 Javascript
原生js编写基于面向对象的分页组件
2016/12/05 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
基于Node的React图片上传组件实现实例代码
2017/05/10 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
webpack3里使用uglifyjs压缩js时打包报错的解决
2018/12/13 Javascript
爬虫利器Puppeteer实战
2019/01/09 Javascript
基于jQuery的时间戳与日期间的转化
2019/06/21 jQuery
vue项目打包之开发环境和部署环境的实现
2020/04/23 Javascript
详解Python中最难理解的点-装饰器
2017/04/03 Python
如何利用Boost.Python实现Python C/C++混合编程详解
2018/11/08 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
增大python字体的方法步骤
2020/07/05 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
年终总结会主持词
2014/03/25 职场文书
幼儿园家长寄语
2014/04/02 职场文书
一位农村小子的自荐信
2014/04/07 职场文书
企业文化演讲稿
2014/05/20 职场文书
化妆品活动策划方案
2014/05/23 职场文书
学校社会实践活动总结
2014/07/03 职场文书
盗窃案辩护词
2015/05/21 职场文书
红色电影观后感
2015/06/18 职场文书
MySQL的join buffer原理
2021/04/29 MySQL
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏