vue实现图片无限滚动播放

news2024/11/13 11:58:47

本人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>

总结

暂时没有找到什么更好方法(不用.js的),只能用css的方法显示,如果大佬有什么更好更便捷的实现方式,欢迎讨论指出

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2237783.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

[ 内网渗透实战篇-2 ] 父域子域架构的搭建与安装域环境判断域控定位组策略域森林架构配置信任关系

&#x1f36c; 博主介绍 &#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是 _PowerShell &#xff0c;很高兴认识大家~ ✨主攻领域&#xff1a;【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 &#x1f389;点赞➕评论➕收藏 养成习…

Follow软件的使用入门教程

开篇 看到很多兄弟还不知道怎么用这个当下爆火的浏览器&#xff01;在这里简单给需要入门的小伙伴一些建议&#xff1a; 介绍 简单解释一下&#xff0c;RSS 意思是简易信息聚合&#xff0c;用户可以通过 RSS 阅读器或聚合工具自主订阅并浏览各个平台的内容源&#xff0c;不用…

esp32学习:用虫洞ESP32开发板,快速实现无线图传

我们的虫洞ESP32-S3-EYE开发板&#xff0c;能够完美运行esp who AI代码&#xff0c;所以实现无线图传那是非常容易的&#xff0c;我们先看看esp who代码库中examples目录&#xff1a; 里面有比较多的web例程&#xff0c;在这些例程下&#xff0c;稍作修改&#xff0c;就可以快速…

最新三维视觉下的扩散模型综述——Diffusion Models in 3D Vision: A Survey

目录 摘要 一、引言 二、扩散模型简介 A.扩散模型的介绍 B.扩散模型的数学基础 C.扩散模型的变体 D.三维视觉中的生成过程 三、三维视觉基础 A.三维表示 B.三维视觉中的深度学习方法 C.3D视觉中的挑战 四、三维扩散生成任务 A.无条件生成 B.图像到三维 C.文本到…

JavaSE:运算符 (学习笔记)

目录 一&#xff0c;算术运算符 【1】 共同点&#xff1a; 【2】 不同点&#xff1a; 二&#xff0c;关系运算符 三&#xff0c;逻辑运算符 2&#xff0c;&和&&的区别和联系 { |和||的区别和联系 }---两题类似 四&#xff0c;赋值运算符 五&#xff0c;拓展…

strtok函数详解

strtok函数 strtok 函数是一个字符串分割函数&#xff0c;用于将字符串分割成一系列的标记。这个函数通过一组分隔符字符来确定标记的边界&#xff0c;每次调用都会返回字符串中的下一个标记&#xff0c;并且将原始字符串中的分隔符替换为空字符‘\0’&#xff0c;从而实际上是…

题目练习之二叉树那些事儿(续集)

♥♥♥~~~~~~欢迎光临知星小度博客空间~~~~~~♥♥♥ ♥♥♥零星地变得优秀~也能拼凑出星河~♥♥♥ ♥♥♥我们一起努力成为更好的自己~♥♥♥ ♥♥♥如果这一篇博客对你有帮助~别忘了点赞分享哦~♥♥♥ ♥♥♥如果有什么问题可以评论区留言或者私信我哦~♥♥♥ ✨✨✨✨✨✨个人…

【入门篇】确定字符串是否包含唯一字符——多语言版本

题目跳转&#xff1a;确定字符串是否包含唯一字符 题目解析 这个问题要求我们判断一个字符串中的字符是否唯一&#xff08;忽略字母的大小写&#xff09;&#xff0c;并输出相应的结果。如果字符串中所有的字符都是唯一的&#xff0c;输出 YES&#xff1b;否则&#xff0c;输…

ConcurrentModificationException:检测到并发修改完美解决方法

&#x1f6a6; ConcurrentModificationException&#xff1a;检测到并发修改完美解决方法 &#x1f4a1; &#x1f6a6; ConcurrentModificationException&#xff1a;检测到并发修改完美解决方法 &#x1f4a1;摘要1. 什么是ConcurrentModificationException&#xff1f;&…

并查集 How many tables(hdu 1213) How many answers are wrong(hdu 3038)

目录 前言 并查集 并查集的初始化 并查集的合并 并查集合并的优化&#xff0c;路径压缩 How many tables(hdu 1213) 问题描述 输入 输出 问题分析 代码 带权并查集 How many answers are wrong(hdu 3038) 问题描述 输入 输出 问题分析 代码 前言 感觉并查集总共有两个应…

JavaScript day01 笔记

一、引入方式 JavaScript 程序不能独立运行&#xff0c;它需要被嵌入 HTML 中&#xff0c;然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中 1️⃣内部 通过 script 标签包裹 JavaScript 代码&#xff08;一般就写在</script>的…

Notepad++ 最新官网中文版在线下载 附文本编辑器安装与基础使用教程

Notepad &#xff08;记事本&#xff09;是一个简单的文本编辑器&#xff0c;预装在所有版本的 Microsoft Windows 操作系统中。它的主要功能是创建、编辑和存储纯文本文件&#xff0c;通常以 .txt 格式保存。Notepad 的设计旨在提供一个轻量级的文本处理工具&#xff0c;适合快…

使用C语言进行信号处理:从理论到实践的全面指南

1. 引言 在现代操作系统中&#xff0c;信号是一种进程间通信机制&#xff0c;它允许操作系统或其他进程向一个进程发送消息。信号可以用来通知进程发生了一些重要事件&#xff0c;如用户请求终止进程、硬件异常、定时器超时等。掌握信号处理技术对于开发健壮、高效的系统程序至…

大数据入门-什么是HBase

目录 一、概念 二、架构 1.Client 2.Zookeeper 3.HMaster 4.HRegionServer 三、特性 1.数据存储庞大 2.支持随机读写 3.轻松融入生态 4.数据强一致性 5.性能足够高效 四、适用场景 五、其他事宜 1.权益备注 2.支持博主 大数据入门系列文章 这里简单介绍的HBas…

【笔记】自动驾驶预测与决策规划_Part6_不确定性感知的决策过程

文章目录 0. 前言1. 部分观测的马尔可夫决策过程1.1 POMDP的思想以及与MDP的联系1.1.1 MDP的过程回顾1.1.2 POMDP定义1.1.3 与MDP的联系及区别POMDP 视角MDP 视角决策次数对最优解的影响 1.2 POMDP的3种常规解法1.2.1 连续状态的“Belief MDP”方法1. 信念状态的定义2. Belief …

Vue2中使用firefox的pdfjs进行文件文件流预览

文章目录 1.使用场景2. 使用方式1. npm 包下载,[点击查看](https://www.npmjs.com/package/pdfjs-dist)2. 官网下载1. 放到public文件夹下面2. 官网下载地址[点我,进入官网](https://github.com/mozilla/pdf.js/tags?afterv3.3.122) 3. 代码演示4. 图片预览5. 如果遇到跨域或者…

MFC图形函数学习06——画椭圆弧线函数

绘制椭圆弧线函数是MFC基本绘图函数&#xff0c;这个函数需要的参数比较多&#xff0c;共四对坐标点。前两对坐标点确定椭圆的位置与大小&#xff0c;后两对坐标确定椭圆弧线的起点与终点。 一、绘制椭圆弧线函数 原型&#xff1a;BOOL Arc(int x1,int y1,int x2,int y2…

新版 idea 编写 idea 插件时,启动出现 ClassNotFound

IntelliJ IDEA 2024.1.6 (Ultimate Edition) Build #IU-241.19072.14, built on August 8, 2024 Licensed to Sophia Tout Subscription is active until June 29, 2025. For educational use only. Runtime version: 17.0.111-b1207.30 amd64 Kotlin: 241.19072.14-IJ 新版本…

信息安全工程师(83)Windows操作系统安全分析与防护

一、Windows操作系统安全分析 系统漏洞&#xff1a; Windows操作系统由于其复杂性和广泛使用&#xff0c;可能存在一些已知或未知的漏洞。这些漏洞可能会被黑客利用&#xff0c;进行恶意攻击。微软会定期发布系统更新和补丁&#xff0c;以修复这些漏洞&#xff0c;提高系统的安…

【嵌入式开发——ARM】1ARM架构

嵌入式领域&#xff0c;使用ARM架构的芯片公司可不占少数吧&#xff0c;intel的x86架构主要占据PC、服务器市场&#xff0c;ARM架构主要占据移动市场。x86架构和ARM架构不同的主要原因&#xff0c;是背后使用的计算机指令集不同。计算机有自己的语言系统&#xff08;汇编&#…