当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue实现图片滚动的示例代码(类似走马灯效果)

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

2018年03月09日  | 移动技术网IT编程  | 我要评论

石台县林业局,九阴真经怀中抱月,哈尔滨科学技术职业学院

上次写了一个简单的图片轮播，这个相当于在上面的一些改进。这个组件除了可以进行图片滚动外，也可以嵌入任何内容的标签进行滚动，里面用了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实现图片滚动的示例代码(类似走马灯效果)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网