当前位置：首页 > news >正文

vue实现图片无限滚动播放

news 2025/7/18 10:16:23

本人vue新手菜鸡，文章为自己在项目中遇到问题的记录，如有不足还请大佬指正

文章目录

实现效果
代码展示
总结

因为刚接触vue，本想着看看能不能用一些element的组件实现图片的轮播效果，尝试使用过element-UI里的走马灯Carouse，但是达不到想要的效果，最后发现还是原始的html+css样式实现才是最🐂的！

实现效果

真实效果能够实现图片的无缝无限轮转

请添加图片描述

代码展示

这里进行了图片轮播的两次操作（即代码中的‘复制’），如果只有一次的话无法实现”无限“这个效果，列表播完就会有一段空白的部分。（可能是我太菜了TAT）

<temple><el-card style="width: 100%"><div class="index-section-info info6"><h3 class="index-title">动态图片</h3></div><div class="gundongBox"><div class="gundong"><div class="topgun"><div class="scroll-container"><!-- 初始图片 --><div class="smallbox" v-for="(item, index) in images" :key="index"><img :src="item.url" class="slide-image" /></div><!-- 复制图片以实现无限滚动 --><div class="smallbox" v-for="(item, index) in images" :key="index"><img :src="item.url" class="slide-image" /></div></div></div></div></div></el-card>
</temple>

<script>
const images = [{ url: 'http://localhost:8100/src/assets/main/picture/newPic.gif' },{ url: 'http://localhost:8100/src/assets/main/picture/newPic2.gif' },{ url: 'http://localhost:8100/src/assets/main/picture/newPic3.gif' },{ url: 'http://localhost:8100/src/assets/main/picture/newPic4.gif' },{ url: 'http://localhost:8100/src/assets/main/picture/newPic5.gif' },{ url: 'http://localhost:8100/src/assets/main/picture/newPic6.gif' },{ url: 'http://localhost:8100/src/assets/main/picture/newPic7.gif' },{ url: 'http://localhost:8100/src/assets/main/picture/newPic8.gif' },
]
</script>


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