vue实现图片滚动效果

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

父：

template>
     p 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    p class="articleList-box-photo ">
         p class="tu imageEffectsAniMATE imageEffects_Magnifier">
          a>
           img class="minMax" :src="props.ITem.img">
          /a>
         /p>
        /p>
        p class="articleList-box-title">
         p class="title">
          a class="textleft">
{
{
props.item.title}
}
    /a>
         /p>
        /p>
       /template>
      /er-carousel-index>
     /p>
    /template>
    script>
 import ErCarouselIndex From './components/carouselIndex/src/carouselIndex.vue' export default {
  name: 'app',  data() {
   }
    }
,  components: {
   ErCarouselIndex//一定要进行组件声明，不然不能引用子组件  }
 }
    /script>
    

子组件：

template>
 p tag="p" 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>
      p id="packageAll" class="er-carouseindex-con" @mouseover="clearAuto" @mouseout="slideAuto">
       p class="er-carouseindex-bar" v-show="isOrNotCircle">
    p v-for="(item,dex) in imgList" @mouseup="clearAuto" class="er-carouseindex-circle" @click="circleClick(dex)" :class="{
circleSelected:dex===indexCircle}
    ">
        /p>
       /p>
   p id="imageAll" class="er-carouseindex-item" :style="{
transform:translatex,transition:transFlag?transitionTime:''}
    ">
    p class="articleList-box er-carouseindex-box" v-for="(list,index) in imgLisShow" :style="{
width:imgWidth+'%'}
    "      style="max-height:50%;
    ">
         slot :item="list">
    /slot>
        /p>
       /p>
      /p>
     /p>
    /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;
    i3;
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.clickSpace500){
         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,里面都有注释。

相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！

推荐阅读：

web端的应用实现后退强制刷新

Vue.directive的自定义指令详解

以上就是vue实现图片滚动效果的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！