vue實現圖片滾動的範例程式碼(類似走馬燈效果)，vue走馬燈

vue實現圖片滾動的範例程式碼(類似走馬燈效果)，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實現圖片滾動的範例程式碼(類似走馬燈效果)就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支援幫客之家。