vue项目实现图片滚动以及悬停效果

实现效果：图片循环滚动，鼠标悬停时显示图片标题内容以及暂停滚动并且图片放大的效果。

也可使用swiper插件实现，现只记录手动实现的方式。

html：

<!-- 图片轮播 -->

      <div class="park_top_swiper">

        <div id="slide">

          <div >

            <img

              :src="BASE_IP+item.imagePath"

              alt=""

              v-for="(item, index) in datas.introduction.slice(0, 6)"

              :key="index"

              @click="goReferralList(item.investId)"

              class="hoverStyle"

              :title="item.investTitle"

            />

          </div>

        </div>

      </div>

scss：

// 设置图片宽高样式

#slide {

  animation: slide 15s linear infinite;

  display: flex;

  flex-direction: row;

  align-items: center;

  img {

    height: 180px;

    width: 300px;

  }

  // 鼠标悬停鼠标放大效果

  img:hover{

    transform: scale(110%,110%);

  }

}

// 鼠标悬停 图片暂停轮播滚动

#slide:hover{

  animation-play-state:paused;

}

// 图片滚动设置

@keyframes slide {

  0% {

    transform: translateX(3%);

  }

  100% {

    transform: translateX(-115%);

  }

}