无缝轮播图

无缝轮播
第一种：css实现
写两遍一样的（需要滚动展示的）数据放在一个整体的div中，当第一遍数据的末尾消失在了左侧，将整体的div移回到原点，前提是一遍数据的宽度足以将滚动的区域占满，如果不能占满，就多写几遍
如果不能理解下面的代码，就把#box的overflow：hidden；去掉（要运行，在浏览器里看），就能清楚的理解了。

<template>
  <div id="box">
    <div class="content">
      <div>
        <span>1</span>
        <img src="./img/1.jpg">
      </div>
      <div>
        <span>2</span>
        <img src="./img/2.jpg">
      </div>
      <div>
        <span>3</span>
        <img src="./img/3.jpg">
      </div>
      <div>
        <span>1</span>
        <img src="./img/1.jpg">
      </div>
      <div>
        <span>2</span>
        <img src="./img/2.jpg">
      </div>
      <div>
        <span>3</span>
        <img src="./img/3.jpg">
      </div>
    </div>
  </div>
</template>
<script>
export default {
  
}
</script>
<style scoped>
  #box{
    width: 600px;
    height: 200px;
    overflow: hidden;
    background: #ccc;
  }
  .content{
    width: 1500px;
    height: 200px;
    animation: lun 15s linear infinite;   // 要给整体数据的大盒子设置动画
  }
  .content div{
    float: left;
    width: 250px;
    height: 200px;
  }
  .content div span{
    display: inline-block;
    width: 100%;
    height: 40px;
    line-height: 40px;
  }
  .content div img{
    width: 100%;
    height: 160px;
  }
  @keyframes lun{
    0%{
      margin-left: 0px;
    }
    20%{
      margin-left: -150px;
    }
    40%{
      margin-left: -300px;
    }
    60%{
      margin-left: -450px;
    }
    80%{
      margin-left: -600px;
    }
    100%{
      margin-left: -750px;   // 存放所有需要滚动数据的div宽度的一遍，即上述例子的content
    }
  }
</style>

第二种：js实现

<template>
  <div class="goods-list">
    <div v-for="i in 18" :key="i">
      <a target="_blank"
        ref="goods"
        href="//fxhh.jd.com?linkIds=267796024,150754714,151089456,225023938,231740702,237784210,263743867,176282953,152494138,1075751#267796024"
        class="goods goods--bottom" clstag="h|keycount|core|goods_b01">
        <div class="goods__name">小甜{{i}}</div>
        <div class="goods__image">
        <div class="lazyimg lazyimg_loaded"><img
          src="//img10.360buyimg.com/ceco/s150x150_jfs/t1/199601/39/2712/38193/6115112cE8dc8a0df/2d3d0e12b35009e5.jpg!q70.jpg.webp"
          class="lazyimg_img" alt="荣耀 双模5G 拍照手机"></div>
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
    name: "userTest"
    , data() {
        return {
            item: 0,
        };

    },
    methods: {
        aaa() {
          // 获取所有的元素(数组)
            let goods = document.getElementsByClassName("goods");
            // 下标
            let index = 0
            // 控制div每10毫秒向左移动1px（每隔10毫秒会调用一次aaa这个方法）
            let jishu = this.item;
            // 记录移动的距离，因为在一直调用这个方法的过程中，jushu会被初始化，所以需要一个不被这个方法影响的变量，来记录
            this.item = jishu-1;
            // 遍历存放所有元素的数组
            for (index; index < goods.length; index++) {
                // let = （ 单个元素的宽度 * 下标 + 1 ） + 要向左移动的距离
                // 例：
                //     第一次调用                      第二次调用                         第三次调用
                // let = 100 * 0 + 0 = 0       let = 100 * 0 + ( -1 ) = -1      let = 100 * 0 + ( -2 ) = -2
                // let = 100 * 1 + 0 = 100     let = 100 * 1 + ( -1 ) = 99      let = 100 * 1 + ( -2 ) = 98
                // let = 100 * 2 + 0 = 200     let = 100 * 2 + ( -1 ) = 199     let = 100 * 2 + ( -2 ) = 198
                // let = 100 * 3 + 0 = 300     let = 100 * 3 + ( -1 ) = 299     let = 100 * 3 + ( -2 ) = 298
                let left = 100 * parseInt(index) +parseInt(jishu);
                // 当left为-101时
                if(left < -100){
                    // left = ( -101 ) + 所有元素所占的宽度
                    left = parseInt(left)+(goods.length *100)
                }
                // 当第一个元素( 下标为0的元素 )回到了最左侧的位置，重置变量item
                if (index===0 && left ===0  && left >-1800 ){
                   // item的值是要为下次调用做准备，所以要是-1，不懂可以看上面的例子 
                    this.item = -1
                }
                // 将计算出来的距左的值，赋值相对应的元素（绝对定位）
                goods[index].setAttribute('style', 'left:' + (left+0) + "px")
            }
        }
    },
    mounted() {
        let _this = this;
        // 利用定时器每隔10毫秒调用一次aaa这个方法
        setInterval(function (){
            _this.aaa()
        }, 10)
    }
}
</script>

<style>
img {
    width: 73% !important;
    height: 100% !important;
}

.goods-list {
    white-space: nowrap;
    width: 900px;
    height: 100px;
    display: flex;
}

.goods {
    height: 100px;
    position: absolute;
    width: 100px;
    padding: 10px;
}
</style>