vue2一页多张图片自动无限循环滚动，鼠标移入停止滚动，鼠标移除自动滚动

直接上代码：

<div class="ad-all">
     <ul class="ad-ul">
        <li
          class="ad-ul-li"
          v-for="(item, index) in arrows"
          :key="index"
          >
           <img :src="item.img" alt="" class="ad-ul-li-img" />
        </li>
     </ul>
</div>

arrows: [
        {
          img: require("@/assets/img/logos-t1/10.jpg"),
        },
        {
          img: require("@/assets/img/logos-t1/11.jpg"),
        },
        ]

样式需要按照自己需求调试；容器宽度，图片大小，

.ad-all {
  overflow: hidden;
  height: 132px;
  width: 1072px;
  margin: 0 auto;
}
.ad-ul {
  width: 1098%;
  height: 100%;
  list-style: none;
  animation-name: move;
  animation-duration: 80s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.ad-ul-li {
  margin: 0px 4px 0px 4px;
  width: 262px;
  float: left;
}

.ad-ul-li-img {
  width: 100%;
}
/* css创建动画 */
@keyframes move {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-90%);
  }
}
/* 鼠标上移，停止动画 */
.ad-all:hover ul {
  cursor: pointer;
  animation-play-state: paused;
}