Vue 向上滚动、向下滚动轮播图

前言原理解说先说向上的轮播在盒子里面放置4张图片复制4张一样的图片放在后面（即乘2）设置外层盒子的高度为4张图的高度，让超出部分隐藏起来overflow:hidden给定一个速度，即每次移动的像素 >=1px设置一个定时器，一直改变内层盒子的offsetTop的位置即可以实现让图片向上/向下滚动解释一下中间的一个判断当向上滚动的时候，offsetTop会一直变小，也就是越来越大的负数此时内

小敏同学

4496人浏览 · 2021-07-25 11:34:30

小敏同学 · 2021-07-25 11:34:30 发布

前言原理解说

先说向上的轮播
在这里插入图片描述
在盒子里面放置4张图片
复制4张一样的图片放在后面（即乘2）
设置外层盒子的高度为4张图的高度，让超出部分隐藏起来overflow:hidden

给定一个速度，即每次移动的像素
设置一个定时器，一直改变内层盒子的Top距离
即可以实现让图片向上/向下滚动

解释一下中间的一个判断
当向上滚动的情况：
初始的时候，内层盒子的top为0（即从第一张图开始向上轮播）
定时器内不断让top减去一个固定的值，即让top越来越小，就能实现上滚
第一张图
第二张图
第三张图（乘2的原因：如果当此时移动到第三张图，或者第四张图的时候，屏幕后半部分会空白）
第四张图（乘2的原因：乘2之后，我们就会看到后继的几张图，而不是看到空白）

第一张图
第二张图
第三张图
…

if (leftWrap.offsetTop < -2672) { 
//已经移动完第四张图片，也就是盒子的一半高度时，让内层盒子的高度变为0，然后继续
  leftWrap.style.top = 0 + "px";
}
leftWrap.style.top = leftWrap.offsetTop - speedup + "px";

当向下滚动的情况：
初始的时候，让内层盒子的top定位到一半的位置top: -2672px;（即从第四张图开始向下轮播）
定时器内不断让top加上一个固定的值，即让top越来越大，就能实现下滚

第四张图
第三张图
第二张图（乘2的原因：如果当此时移动到第二张图，或者第一张图的时候，屏幕后半部分会空白）
第一张图（乘2的原因：乘2之后，我们就会看到前面的几张图，而不是看到空白）

第四张图
第三张图
第二张图
…

if (rightWrap.offsetTop >= 0) { 
//已经移完第一张图，也就是top为0的时候，让内层盒子top改为-2672px，继续向下滚动
   rightWrap.style.top = -2672 + "px";
 }
 rightWrap.style.top = rightWrap.offsetTop + speeddowm + "px";

1.HTML部分

注意事项：
如果需要鼠标移入，暂停播放；鼠标移出，继续播放的效果
则需要添加这两个时间函数@mouseover=“pasue” @mouseout=“play”

<div id="app">
  <div id="div2" @mouseover="pasue" @mouseout="play">
    <div id="wrap">
      <div class="item">
        <img src="https://img2.baidu.com/it/u=1786147954,3770383148&fm=26&fmt=auto&gp=0.jpg">
      </div>
      <div class="item">
        <img src="https://img1.baidu.com/it/u=3251653125,2541959792&fm=26&fmt=auto&gp=0.jpg">
      </div>
      <div class="item">
        <img src="https://img0.baidu.com/it/u=1024815077,3823714427&fm=26&fmt=auto&gp=0.jpg">
      </div>
      <div class="item">
        <img src="https://img1.baidu.com/it/u=3232494856,29183283&fm=26&fmt=auto&gp=0.jpg">
      </div>
    </div>
  </div>
</div>

2.CSS部分

注意事项：
外层盒子div2一定要限制高度，相对定位，超出隐藏
内层盒子wrap绝对定位左上

#div2 {
  width: 533px;
  height: 1200px;
  position: relative;
  overflow: hidden;
}

#wrap {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
}

#wrap div {
  float: left;
  width: 533px;
  height: 300px; 
}

3.JS部分

  <script type="text/javascript">
    var vm = new Vue({
      el: '#app',
      data: {
        timer: '' //全局定时器
      },
      methods: {
        autoPlay() { //自动播放 
          var speed = 1;//初始化速度 

          var oWrap = document.getElementById('wrap'); //获取外层盒子 

          oWrap.innerHTML += oWrap.innerHTML;//图片内容*2，播放的时候障眼法，不会断章
          var oImgs = document.getElementsByClassName('item'); //获取所有的item
          oWrap.style.height = oImgs.length * 300 + 'px';//设置oWrap的高度使图片可以放下 
          //300 是高度，依据你图片的高度来定 

          this.timer = setInterval(function () { //设置定时器
            if (oWrap.offsetTop < -(oWrap.offsetHeight / 2)) {//当前四张图移除的时候，重新开始移
              oWrap.style.top = 0;
            }
            oWrap.style.top = oWrap.offsetTop - speed + 'px';
          }, 10)
        },
        pasue() { //鼠标移入图片暂停轮播
          clearInterval(this.timer)
        },
        play() { //鼠标移除图片继续轮播
          this.autoPlay();
        },
      },
      mounted() { //在vue挂载期间，就开启定时器，让轮播动起来
        this.autoPlay()
      }
    })
  </script>

参考博客：
vue 实现无缝向左滚动鼠标悬停、离开时停止、开始滚动
 vue项目的无缝轮播

4.vue组件中的使用案例

这里的left就是向上滚动的
这里的right就是向下滚动的

<template> 
  <div class="fake"> 
    <div class="container">
      <div class="float-img">
        <img src="@/assets/designActivety/Group 137.png" alt="" />
      </div>
      <div class="left" id="left">
        <div
          id="leftWrap"
          ref="leftWrap"
          @mouseover="pasue('left')"
          @mouseout="play('left')"
        >
          <div class="item">
            <router-link to="/SGSHB"
              ><img src="@/assets/designActivety/image (1).png" alt=""
            /></router-link>
          </div>
          <div class="item">
            <img src="@/assets/designActivety/image (2).png" alt="" />
          </div>
          <div class="item">
            <router-link to="/WCB"
              ><img src="@/assets/designActivety/image (3).png" alt=""
            /></router-link>
          </div>
          <div class="item">
            <router-link to="/TSJ"
              ><img src="@/assets/designActivety/image (4).png" alt=""
            /></router-link>
          </div>
        </div>
      </div>
      <div class="right" id="right">
        <div
          id="rightWrap"
          ref="rightWrap"
          @mouseover="pasue('right')"
          @mouseout="play('right')"
        >
          <div class="item">
            <router-link to="/TSJ"
              ><img src="@/assets/designActivety/image (4).png" alt=""
            /></router-link>
          </div>
          <div class="item">
            <router-link to="/WCB"
              ><img src="@/assets/designActivety/image (3).png" alt=""
            /></router-link>
          </div>
          <div class="item">
            <img src="@/assets/designActivety/image (2).png" alt="" />
          </div>
          <div class="item">
            <router-link to="/SGSHB"
              ><img src="@/assets/designActivety/image (1).png" alt=""
            /></router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script> 
export default { 
  data() {
    return {
      timerLeft: "",
      timerRight: "",
    };
  },
  methods: {
    autoPlayLeft() { //向上轮播 
      var speedup = 1; //初始化速度
      var leftWrap = this.$refs.leftWrap; //如果这里使用上面的方法不行的华，就使用refs来获取也行
      leftWrap.innerHTML += leftWrap.innerHTML; //图片内容*2
      var oImgs = document.getElementsByClassName("item");
      leftWrap.style.height = oImgs.length * 680 + "px"; //680 是一张图片高度

      this.timerLeft = setInterval(function () {
        if (leftWrap.offsetTop < -2672) { //向上轮播，top移出到一半的时候，重新开始
          leftWrap.style.top = 0 + "px";
        }
        leftWrap.style.top = leftWrap.offsetTop - speedup + "px";
      }, 4);
    },
    autoPlayRight() { //向下轮播
      var speeddowm = 1; //初始化速度
      var rightWrap = this.$refs.rightWrap;
      rightWrap.innerHTML += rightWrap.innerHTML; //图片内容*2
      var oImgs = document.getElementsByClassName("item");
      rightWrap.style.height = oImgs.length * 680 + "px";

      this.timerRight = setInterval(function () {
        if (rightWrap.offsetTop >= 0) { //向下轮播，top移动到0的时候从一半的位置继续移动
          rightWrap.style.top = -2672 + "px";
        }
        rightWrap.style.top = rightWrap.offsetTop + speeddowm + "px";
      }, 4);
    },
    pasue(derection) {
      if (derection == "left") {
        clearInterval(this.timerLeft);
      } else {
        clearInterval(this.timerRight);
      }
    },
    play(derection) {
      if (derection == "left") {
        this.autoPlayLeft();
      } else {
        this.autoPlayRight();
      }
    },
  },
  mounted() {
    this.autoPlayLeft();
    this.autoPlayRight();
  },
};
</script>

<style lang="scss" scoped>
.fake {
  width: 100%;
  height: 1640px;
  .container {
    background-color: #fbf9f7;
    padding: 0 14%;
    position: relative;
    .float-img {
      position: absolute;
      top: 0;
      left: 0;
      img {
        width: 94%;
      }
    }
    .left {
      display: inline-block;
      width: 49%;
      height: 800px;
      padding-left: 30px;
      box-sizing: border-box;
      img {
        width: 450px;
        margin-bottom: 40px;
      }
    }
    .right {
      display: inline-block;
      width: 49%;
      padding-left: 40px;
      box-sizing: border-box;
      img {
        width: 450px;
        margin-bottom: 40px;
      }
    }
  }
  #right {
    width: 536px;
    height: 2672px;
    position: relative;
    overflow: hidden;
    #rightWrap {
      position: absolute;
      top: -2672px;
      overflow: hidden;
      #rightWrap div {
        float: left;
        width: 450px;
        height: 680px;
        img {
          width: 100%;
        }
      }
    }
  }
  #left {
    width: 536px;
    height: 2672px;
    position: relative;
    overflow: hidden;
    #leftWrap {
      position: absolute;
      overflow: hidden;
      #leftWrap div {
        float: left;
        width: 450px;
        height: 680px;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

Vue

echarts堆叠柱状图

Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...