vue2.0做图片无限循环滚动

是小周呦!

已于 2024-03-06 19:31:13 修改

阅读量800

点赞数 7

文章标签： vue.js 前端 javascript

于 2023-12-04 17:21:38 首次发布

本文链接：https://blog.csdn.net/weixin_65610165/article/details/134789430

版权

这篇文章详细介绍了如何使用Vue.js和CSS创建一个具有无限滚动功能的城市图片轮播组件，展示了如何通过数据绑定和动画效果实现图片的无缝切换。

摘要由CSDN通过智能技术生成

<template>
  <div class="app">
    <div class="gundong">
      <div class="topgun">
        <div class="scroll-container">
          <!-- 初始图片 -->
          <div class="smallbox" v-for="(item, index) in images" :key="index">
            <img
              :src="require(`../sucai/cityphoto/${item.url}`)"
              class="slide-image"
            />
          </div>
          <!-- 复制图片以实现无限滚动 -->
          <div class="smallbox" v-for="(item, index) in images" :key="index">
            <img
              :src="require(`../sucai/cityphoto/${item.url}`)"
              class="slide-image"
            />
          </div>
        </div>
      </div>
      <div class="bottomgun">
        <div class="yougun">
          <!-- 初始图片 -->
          <div class="smallbox2" v-for="(item, index) in tu" :key="index">
            <img
              :src="require(`../sucai/cityphoto/${item.url}`)"
              class="slide-image"
            />
          </div>
          <!-- 向右滚动 -->
          <div class="smallbox2" v-for="(item, index) in tu" :key="index">
            <img
              :src="require(`../sucai/cityphoto/${item.url}`)"
              class="slide-image"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        { url: "beijing.png" },
        { url: "chongqing.png" },
        { url: "guangzhou.png" },
        { url: "hangzhou.png" },
      ],
      tu: [
        { url: "shanghai.png" },
        { url: "shenzheng.png" },
        { url: "suzhou.png" },
        { url: "xingjiapo.png" },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.app {
  margin-top: 20px;
  .gundong {
    width: 70%;
    margin: 0 auto;
    height: 600px;
    display: flex;
    flex-direction: column;
    .topgun {
      height: 300px;
      display: flex;
      overflow: hidden;
      .scroll-container {
        display: flex;
        animation: slide 20s linear infinite;
        .smallbox {
          width: 25%;
          display: flex;
          img.slide-image {
            display: flex;
          }
        }
      }
    }
    .scroll-container:hover{
      cursor: pointer;
      animation-play-state:'paused'
    }
    .bottomgun {
    //   border: 1px solid black;
      height: 300px;
      display: flex;
      overflow: hidden;
      .yougun {
        display: flex;
        animation: moves 20s linear infinite;
        .smallbox2 {
          width: 25%;
          display: flex;
          img.slide-image {
            display: flex;
          }
        }
      }
    }
    .bottomgun:hover{
      cursor: pointer;
    }
  }
  @keyframes slide {
    0% {
      transform: translateX(0%);
    }
    100% {
      transform: translateX(-50%); // 滚动一个小框的宽度
    }
  }
  @keyframes moves {
    0% {
      transform: translateX(-50%);
    }
    100% {
      transform: translateX(0%); // 滚动一个小框的宽度
    }
  }
}
</style>