前言 原理解说
先说向上的轮播
在盒子里面放置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="/it/u=1786147954,3770383148&fm=26&fmt=auto&gp=0.jpg"></div><div class="item"><img src="/it/u=3251653125,2541959792&fm=26&fmt=auto&gp=0.jpg"></div><div class="item"><img src="/it/u=1024815077,3823714427&fm=26&fmt=auto&gp=0.jpg"></div><div class="item"><img src="/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'); //获取所有的itemoWrap.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"><divid="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"><divid="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; //图片内容*2var 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; //图片内容*2var 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>
