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 相关文章推荐
jQuery使用手册之一
Mar 24 Javascript
javascript实现的listview效果
Apr 28 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
ECMAScript 创建自己的js类库
Nov 22 Javascript
JS简单的图片放大缩小的两种方法
Nov 11 Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 Javascript
JS实现兼容各种浏览器的获取选择文本的方法【测试可用】
Jun 21 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
Dec 19 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
详解JavaScript 为什么要有 Symbol 类型?
Apr 03 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
PHP中抽象类、接口的区别与选择分析
2016/03/29 PHP
XENON基于JSON变种
2010/07/27 Javascript
基于Jquery的淡入淡出的特效基础练习
2010/12/13 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript“尽快失败”的原则实例详解
2016/10/08 Javascript
node.js操作mysql简单实例
2017/05/25 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
vue+iview写个弹框的示例代码
2017/12/05 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
VUE使用axios调用后台API接口的方法
2020/08/03 Javascript
js实现三角形粒子运动
2020/09/22 Javascript
基于jQuery拖拽事件的封装
2020/11/29 jQuery
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
使用Python神器对付12306变态验证码
2016/01/05 Python
python 匹配url中是否存在IP地址的方法
2018/06/04 Python
降低python版本的操作方法
2020/09/11 Python
Android本地应用打开方法——通过html5写连接
2016/03/11 HTML / CSS
HTML5 拖拽批量上传文件的示例代码
2018/03/28 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
小米旗下精品生活电商平台:小米有品
2018/12/18 全球购物
捷克购买家具网站:JENA nábytek
2020/03/19 全球购物
Ruby如何定义一个类
2012/10/08 面试题
应届生求职信写作技巧
2013/10/24 职场文书
《世界多美呀》教学反思
2014/03/02 职场文书
祖国在我心中演讲稿400字
2014/05/04 职场文书
单位同意报考证明
2015/06/17 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python