js写一个无缝滚动广告

使用JS实现无缝滚动广告

最新推荐文章于 2021-08-17 17:14:15 发布

原创

最新推荐文章于 2021-08-17 17:14:15 发布 · 541 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#无缝滚动

本文介绍了如何为项目官网创建一个无缝滚动的合作伙伴logo展示。通过接口获取图片，确保每个图片大小和间隔一致，利用HTML、CSS和JavaScript实现简单易控的无缝滚动效果，避免出现视觉上的不稳定现象。

项目官网要求将合作伙伴的logo以无缝滚动的样式展示在首页
插件改起来真麻烦，就自己写吧，自己写的最起码是可控的，不会出现奇奇怪怪的问题

效果图：（其实它的滚起来的，不是静止的…）
在这里插入图片描述
合作伙伴的logo都是从接口读取的图片，ui设计要求每个图片大小一致，间隔一致，所以写起来比较简单

html:

<div class="t">
<div class="t-1">ABOUT PARTENER</div>
  <div class="t-2"><span style="color:#EEBB40;">合作</span>伙伴</div>
  <div class="partener-wrap" ref="partWap">
      <div class="partTab" ref="partTab" >
          <div class="ps" v-for="(m,index) in partners" :key="index">
              < img :src="imgUrl+m.filePath"/>
          </div>
      </div>
  </div>
</div>

css:

 .partener{
     position: relative;
     text-align: center;
     background-color: #FFEBC4;
     background: url(../commom/img/home/back2.png);
     background-size: cover;
     .ps{
         display: