![](https://img2022.cnblogs.com/blog/1968937/202210/1968937-20221026153852290-765283873.png)
有N张图片无限滚动轮播。代码如下。
![](https://img2022.cnblogs.com/blog/1968937/202210/1968937-20221026160242358-1900103798.png)
1 <div class="partnerCont"> 2 <div class="cont"> 3 <div class="list"> 4 <div class="item" v-for="(item,index) in partnerLogo"> 5 <img :src="item" alt="logo"> 6 </div> 7 <!-- 重复放两个相同的内容是为了无缝滚动,防止突兀空缺跳动--> 8 <div class="item item2" v-for="(item,index) in partnerLogo"> 9 <img :src="item" alt="logo"> 10 </div> 11 </div> 12 </div> 13 </div>
1 .partnerCont { 2 width: 1100px; 3 margin: auto; 4 5 .cont { 6 overflow: hidden; 7 8 .list { 9 display: flex; 10 animation: partnerSWiper 20s linear infinite normal; 11 12 .item { 13 height: 48px; 14 flex: none; 15 text-align: center; 16 margin: 0 12px; 17 18 19 img { 20 height: 100%; 21 display: block; 22 margin: auto; 23 } 24 } 25 26 } 27 } 28 29 @keyframes partnerSWiper { 30 0% { 31 transform: translateX(0); 32 } 33 100% { 34 transform: translateX(-1410px); 35 } 36 } 37 }