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

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