vue实现图片滚动的示例代码(类似走马灯效果)


Posted in Javascript onMarch 03, 2018

上次写了一个简单的图片轮播,这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外,也可以嵌入任何内容的标签进行滚动,里面用了slot进行封装。

父:

<template>
 <div id="app">
  <er-carousel-index :typeNumber=2 :pageNumber=3 :timeSpace=2 :duration=2 :isOrNotCircle="true" url="/src/js/index.json" :isOrNotButton=false>
   <template scope="props">-----使用子组件传过来的值,封装slot
    <div class="articleList-box-photo ">
     <div class="tu imageEffectsAnimate imageEffects_Magnifier">
      <a>
       <img class="minMax" :src="props.item.img">
      </a>
     </div>
    </div>
    <div class="articleList-box-title">
     <div class="title">
      <a class="textleft">{{props.item.title}}</a>
     </div>
    </div>
   </template>
  </er-carousel-index>
 </div>
</template>
<script>
 import ErCarouselIndex from './components/carouselIndex/src/carouselIndex.vue'
 export default {
  name: 'app',
  data() {
   }
    },
  components: {
   ErCarouselIndex//一定要进行组件声明,不然不能引用子组件
  }
 }
</script>

子组件:

<template>
 <div tag="div" class="articleList articleListMod-3 er-carouseindex" name="slide-fade" id="articleList" :style="{height:imgHeight+'px'}" >
  <span id="btn1" class="er-carouseindex-left" @mousedown="imgMove('mouseLeft')" @mouseup="cancelMove('left')" v-show="isOrNotButton"></span>
  <span id="btn2" class="er-carouseindex-right" @mousedown="imgMove('mouseRight')" @mouseup="cancelMove('right')" v-show="isOrNotButton"></span>
  <div id="packageAll" class="er-carouseindex-con" @mouseover="clearAuto" @mouseout="slideAuto">
   <div class="er-carouseindex-bar" v-show="isOrNotCircle">
    <div v-for="(item,dex) in imgList" @mouseup="clearAuto" class="er-carouseindex-circle" @click="circleClick(dex)" :class="{circleSelected:dex===indexCircle}">
    </div>
   </div>
   <div id="imageAll" class="er-carouseindex-item" :style="{transform:translateX,transition:transFlag?transitionTime:''}">
    <div class="articleList-box er-carouseindex-box" v-for="(list,index) in imgLisShow" :style="{width:imgWidth+'%'}"
      style="max-height:50%;">
     <slot :item="list"></slot>
    </div>
   </div>
  </div>
 </div>
</template>
<script>
 export default
 {
  name: "ErCarouselIndex",
  data(){
   return {
    imgList: [],//请求接口数据
    imgLisShow: [],//图片滚动数据,包括左中右三种
    timer: null,//自动循环滚动时的间隔时间
    timeout:null,//长按时的图片滚动间隔时间
    index:0,//图片索引
    translateXnum:0,//图片滚动时的偏移量
    translateX:"",//生成图片偏移时的表达式
    imgWidth:"",//图片所占宽度
    timeDown:"",//鼠标刚按下时的时间
    timeup:"",//鼠标松开时的时间
    clickSpace:"",//鼠标按下松开的时间间隙
    transFlag:true,//是否匀速滚动,
    transitionTime:"",
    indexCircle:0//小圆圈滚动索引
   }
  },
  props:{
   duration:0,//图片延时滚动
   typeNumber:0, //每次滚动几张
   timeSpace:0, //图片滚动时间间隔
   url:String,//请求接口地址
   pageNumber:0,//当前页面显示几张图片
   isOrNotButton:true,//是否显示左右按钮
   isOrNotCircle:true,//是否显示小圆圈
   imgHeight:""//图片滚动显示高度
  },
  watch:{
   index:{
    handler(){
     var _this=this;
     if(Math.abs(this.index)==this.imgList.length){
      this.indexCircle=0;
      setTimeout(function(){
       _this.reset();
      },_this.duration*1000*0.98);
     }else{
      this.indexCircle=this.index;
     }
     this.calcXnum();
     }
   },
   translateXnum:{
    handler(){
     this.translateX="translateX("+this.translateXnum+"%)";
    }
   }
  },
  methods:{
   //页面初始化复赋值
   imgView:function() {
    var _this = this;
    _this.$http.get(_this.url).then(function (res) {
     _this.imgList = res.data.imgList;
     for(var i=0;i<3;i++){
      _this.imgList.forEach(function (item, index) {
       _this.imgLisShow.push(item);
      });
     }
     _this.reset();
     _this.slideAuto();
     _this.imgWidth=(100/_this.pageNumber)-1;
     _this.transitionTime="all "+_this.duration*0.98+"s linear";
     console.log(_this.transitionTime);
    });
   },
   //图片滚动方法(长按)
   imgMove:function(direct){
    var _this = this;
    _this.timeDown=new Date();//记录按下的时间
    _this.timeout = setInterval(function() {
     if(direct=="mouseLeft") {
      _this.leftMove();
     }else{
      _this.rightMove();
     }
    },300);
   },
   //鼠标送开时执行的方法
   cancelMove:function(direct){
    var _this = this;
    _this.clearAuto();
    this.timeup=new Date();//记录松开的时间
    this.clickSpace=this.timeup.getTime() - this.timeDown.getTime();
    //时间间隔小于500毫秒为点击,反之为长按
    if(this.clickSpace<500){
     for(var i=0;i<_this.typeNumber;i++){
      if(direct=="left"){
       _this.leftMove();
      }else{
       _this.rightMove();
      }
     }
    }
    if (this.timeout) {
     clearInterval(this.timeout);
     this.timeout = null;
    }
   },
   //向左移动
   leftMove:function(){
    this.index--;
    this.transFlag=true;
   },
   //向右移动
   rightMove:function(){
    this.transFlag=true;
    this.index++;
   },
   slideAuto:function () {
    var _this = this;
    _this.timer = setTimeout(function () {
     if(Math.abs(_this.index)!==_this.imgList.length){
      _this.rightMove();
      _this.slideAuto();
     }
    }, _this.timeSpace * 1000);
   },
   clearAuto:function () {
    console.log("停止");
    if (this.timer) {
     clearInterval(this.timer);
     this.timer = null;
    }
   },
   //重置
   reset:function(){
    this.index=0;
    this.transFlag=false;
    this.calcXnum();
   },
   calcXnum:function(){
    var _this=this;
    this.translateXnum=-(this.index+this.imgList.length)*(100/this.pageNumber);
   },
   //点击圆圈跳转图片
   circleClick:function(dex){
    this.index=dex;
    this.clearAuto();
   }
  },
  mounted()
  {
   this.$nextTick(function () {
    this.imgView();
   });
  }
 }
</script>

这个组件相对来说功能比较完整,用户可以通过传参来控制当前页面需要显示几张图片,图片滚动时间间隔,是否显示左右点击按钮等等,详细参数可以查看props,里面都有注释。

以上这篇vue实现图片滚动的示例代码(类似走马灯效果)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
Feb 05 Javascript
JS获取URL中的参数数据
Dec 05 Javascript
JS烟花背景效果实现方法
Mar 03 Javascript
javascript中返回顶部按钮的实现
May 05 Javascript
微信小程序访问node.js接口服务器搭建教程
Apr 25 Javascript
Mobile Web开发基础之四--处理手机设备的横竖屏问题
Aug 11 Javascript
vue+vue-validator 表单验证功能的实现代码
Nov 13 Javascript
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
React中阻止事件冒泡的问题详析
Apr 12 Javascript
原生Vue 实现右键菜单组件功能
Dec 16 Javascript
解决ant design vue中树形控件defaultExpandAll设置无效的问题
Oct 26 Javascript
Vue2.0中集成UEditor富文本编辑器的方法
Mar 03 #Javascript
js操作二进制数据方法
Mar 03 #Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 #Javascript
Vue的轮播图组件实现方法
Mar 03 #Javascript
在Vue中使用Compass的方法
Mar 02 #Javascript
AjaxUpLoad.js实现文件上传功能
Mar 02 #Javascript
关闭Vue计算属性自带的缓存功能方法
Mar 02 #Javascript
You might like
2019十大人气国漫
2020/03/13 国漫
PHP safe_mode开启对于PHP系统函数有什么影响
2020/11/10 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
30个最佳jQuery Lightbox效果插件分享
2011/04/11 Javascript
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
js实现改进的仿蓝色论坛导航菜单效果代码
2015/09/06 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
2016/01/09 Javascript
JavaScript比较两个数组的内容是否相同(推荐)
2017/05/02 Javascript
Angular.js指令学习中一些重要属性的用法教程
2017/05/24 Javascript
详解vue-cli与webpack结合如何处理静态资源
2017/09/19 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
JavaScript事件委托实现原理及优点进行
2020/08/29 Javascript
[03:06]2018年度CS GO最具人气解说-完美盛典
2018/12/16 DOTA
[46:55]LGD vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
Python中的lstrip()方法使用简介
2015/05/19 Python
python3大文件解压和基本操作
2017/12/15 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python操作Elasticsearch处理timeout超时
2020/07/17 Python
python批量生成条形码的示例
2020/10/10 Python
python 用opencv实现霍夫线变换
2020/11/27 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
关于感谢信的范文
2015/01/23 职场文书
酒店财务经理岗位职责
2015/04/08 职场文书
2015年房地产销售工作总结
2015/04/20 职场文书
讲座通知范文
2015/04/23 职场文书
2016年师德先进个人事迹材料
2016/02/29 职场文书
关于考试抄袭的检讨书
2019/11/02 职场文书
Python基础之元类详解
2021/04/29 Python
javascript数组includes、reduce的基本使用
2021/07/02 Javascript