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 相关文章推荐
script标签的 charset 属性使用说明
Dec 04 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
什么是DOM(Document Object Model)文档对象模型
Mar 05 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
浅谈javascript 函数属性和方法
Jan 21 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
angular.js+node.js实现下载图片处理详解
Mar 31 Javascript
Angular通过angular-cli来搭建web前端项目的方法
Jul 27 Javascript
jQuery中库的引用方法
Jan 06 jQuery
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
原生JS实现多条件筛选
Aug 19 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
简单实用的.net DataTable导出Execl
2013/10/28 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
PHP迭代器和迭代的实现与使用方法分析
2018/04/19 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
prototype 1.5 &amp; scriptaculous 1.6.1 学习笔记
2006/09/07 Javascript
event.keyCode键码值表 附只能输入特定的字符串代码
2009/05/15 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
2015/08/22 Javascript
详解Node.js模块间共享数据库连接的方法
2016/05/24 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
原生js开发的日历插件
2017/02/04 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
使用Vue-cli 中为单独页面设置背景图片铺满全屏
2020/07/17 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
python简单文本处理的方法
2015/07/10 Python
玩转python爬虫之爬取糗事百科段子
2016/02/17 Python
python妙用之编码的转换详解
2017/04/21 Python
python读取文本中的坐标方法
2018/10/14 Python
pymongo中聚合查询的使用方法
2019/03/22 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python绘制雪景图
2019/12/16 Python
python实现简易版学生成绩管理系统
2020/06/22 Python
35款精致的 CSS3 和 HTML5 网页模板 推荐
2012/08/03 HTML / CSS
使用css3和jquery实现可伸缩搜索框
2014/02/12 HTML / CSS
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
毕业班联欢会主持词
2014/03/27 职场文书
房地产推广策划方案
2014/05/19 职场文书
机械加工与数控专业自荐书
2014/06/04 职场文书
地震捐款倡议书
2014/08/29 职场文书
重阳节标语大全
2014/10/07 职场文书
理想国读书笔记
2015/06/25 职场文书
MySQL大小写敏感的注意事项
2021/05/24 MySQL
SQL语句中JOIN的用法场景分析
2021/07/25 SQL Server
vue实现列表垂直无缝滚动
2022/04/08 Vue.js