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 相关文章推荐
番茄的表单验证类代码修改版
Jul 18 Javascript
IE8提示Invalid procedure call or argument 异常的解决方法
Sep 30 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
Jan 26 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 Javascript
JS中改变this指向的方法(call和apply、bind)
Mar 26 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
Aug 23 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
Dec 16 Javascript
angular.JS实现网页禁用调试、复制和剪切
Mar 31 Javascript
JS算法题之查找数字在数组中的索引位置
May 15 Javascript
es6中class类静态方法,静态属性,实例属性,实例方法的理解与应用分析
Feb 15 Javascript
vue 使用rules对表单字段进行校验的步骤
Dec 25 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
什么是调频(FM)、调幅(AM)、短波(SW)、长波(LW)
2021/03/01 无线电
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
JavaScript高级程序设计阅读笔记(六) ECMAScript中的运算符(二)
2012/02/27 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
第一次接触JS require.js模块化工具
2016/04/17 Javascript
JS验证不重复验证码
2017/02/10 Javascript
JavaScript订单操作小程序完整版
2017/06/23 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
详解vue 实例方法和数据
2017/10/23 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
BootStrap模态框闪退问题实例代码详解
2018/12/10 Javascript
基于javascript处理nginx请求过程详解
2020/07/07 Javascript
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
Python的Bottle框架中实现最基本的get和post的方法的教程
2015/04/30 Python
Python脚本实现自动将数据库备份到 Dropbox
2017/02/06 Python
python实现数据写入excel表格
2018/03/25 Python
python实现的按要求生成手机号功能示例
2019/10/08 Python
matplotlib绘制多个子图(subplot)的方法
2019/12/03 Python
Html5之webcoekt播放JPEG图片流
2020/09/22 HTML / CSS
美国一家主打母婴用品的团购网站:zulily
2017/09/19 全球购物
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
英国定做窗帘和纺织品面料一站式商店:Dekoria
2018/08/29 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
交通专业个人自荐信格式
2013/09/23 职场文书
主题婚礼策划方案
2014/02/10 职场文书
小学母亲节活动方案
2014/03/14 职场文书
二年级评语大全
2014/04/23 职场文书
乌镇导游词
2015/02/02 职场文书
2015年超市收银员工作总结
2015/04/25 职场文书
《去年的树》教学反思
2016/02/18 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书
JavaScript如何利用Promise控制并发请求个数
2021/05/14 Javascript
golang三种设计模式之简单工厂、方法工厂和抽象工厂
2022/04/10 Golang