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 相关文章推荐
JavaScript面向对象编程
Mar 02 Javascript
indexOf 和 lastIndexOf 使用示例介绍
Sep 02 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
详解Angular中$cacheFactory缓存的使用
Aug 19 Javascript
js操作浏览器的参数方法
Jan 21 Javascript
详解如何在Vue2中实现组件props双向绑定
Mar 29 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
微信小程序修改swiper默认指示器样式的实例代码
Jul 18 Javascript
node中的session的具体使用
Sep 14 Javascript
countup.js实现数字动态叠加效果
Oct 17 Javascript
vue.js实现点击图标放大离开时缩小的代码
Jan 27 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
php socket方式提交的post详解
2008/07/19 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
Yii框架 session 数据库存储操作方法示例
2019/11/18 PHP
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
2015/08/26 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
Jquery Easyui分割按钮组件SplitButton使用详解(17)
2016/12/18 Javascript
详解jQuery事件
2017/01/13 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JavaScript实现简单音乐播放器
2020/04/17 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
vue实现点击追加选中样式效果
2019/11/01 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[03:02]生活中的Dendi之野外度假篇
2016/08/09 DOTA
通过代码实例展示Python中列表生成式的用法
2015/03/31 Python
python如何让类支持比较运算
2018/03/20 Python
Python中list的交、并、差集获取方法示例
2019/08/01 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
Python库skimage绘制二值图像代码实例
2020/04/10 Python
Django多数据库联用实现方法解析
2020/11/12 Python
Clarins娇韵诗美国官网:法国天然护肤品牌
2016/09/26 全球购物
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
美国户外运动商店:Sun & Ski
2018/08/23 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
大唐电信科技股份有限公司java工程师面试经历
2016/12/09 面试题
个人课题方案
2014/05/08 职场文书
授权委托书格式
2014/07/31 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
英语版自我评价,35句话轻松搞定
2019/10/08 职场文书
Python机器学习之基于Pytorch实现猫狗分类
2021/06/08 Python
Redis 常见使用场景
2021/08/30 Redis
Python编写冷笑话生成器
2022/04/20 Python
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android