CSS实现广告自动轮播

实现原理
该广告轮播功能的实现主要依靠HTML和CSS。HTML负责搭建轮播框架,而CSS则控制样式和动画效果。通过CSS中的关键帧动画(Keyframes),我们可以定义图片在容器内的滚动效果,从而实现轮播功能。

HTML结构

首先,我们需要一个包裹所有轮播图片的容器,并在其中放置各个广告图片:

<div class="slider"><div class="container"><img src="images/b1.jpg" alt=""><img src="images/b2.jpg" alt=""><img src="images/b3.png" alt=""><img src="images/b4.jpg" alt=""></div>
</div>

CSS样式

接下来需要再css中设置轮播容器和图片的样式。 .slider 是整个轮播区域,宽度被设定为单张图片的宽度 (1226px),高度为 460px,并且居中显示。.slider .container 的宽度则是单张图片宽度乘以图片数量 (4 * 1226px = 4904px),保证了可以容纳4张图片连续排列。因为这里有四张图片,所以 在0%时,不平移;在25%时,向左平移一张图片的宽度;在50%时,向左平移两张图片的宽度;在75%时,向左平移三张图片的宽度;在100%时,回到初始位置,开始新一轮的循环。

.slider {height: 460px;width: 1226px;margin: 0 auto;overflow: hidden;position: relative;
}.slider .container {width: 4904px; /* 图片宽度 * 图片数量 */height: 460px;overflow: hidden;position: absolute;display: flex;animation: run 10s linear infinite;
}.slider img {height: 100%;width: 1226px;display: block;margin: 0 auto;
}@keyframes run {0% {transform: translateX(0);}25% {transform: translateX(-1226px);}50% {transform: translateX(-2452px);}75% {transform: translateX(-3678px);}100% {transform: translateX(0);}
}

下面是模仿小米商城的一个效果

在这里插入图片描述

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

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

相关文章

如何搭建线下陪玩系统(本地伴游、多玩圈子)APP小程序H5多端前后端源码交付,支持二开!

一、卡顿的优化方法 1、对陪玩系统源码中流媒体传输的上行进行优化&#xff0c;通过提升推流端的设备性能配置、推流边缘CDN节点就近选择等方式解决音视频数据源流的卡顿。 2、对陪玩系统源码中音视频数据的下载链路进行优化&#xff0c;通过选择更近更优质的CDN边缘节点来减少…

Navicat导入sql文件图文教程

本文使用的MySQL工具为:Navicat.默认已经连接数据库!! 步骤: 1.右键自己的数据库,选择新建数据库. 2.输入数据库名称&#xff0c;字符集选择“utf8”&#xff0c;排序规则选择“ utf8_general_ci”,确定. 3.双击新建好的“数据库”。右键点击“运行SQL文件”。 4.选择本地的s…

linux信号相关概念

signal 信号引入什么是信号&#xff1f;如何产生信号&#xff1f;通过按键产生信号调用系统函数向进程发信号系统调用函数发送信号的流程: 由软件条件产生信号软件发送信号的流程&#xff1a; 硬件异常产生信号硬件异常的流程&#xff1a; Deliver、Pending、Block概念信号在内…

Vue 查看真实请求地址

当你在项目中配置了proxy代理&#xff0c;前端在浏览器开发调试的时候&#xff0c;是看不到真是的请求地址的。 这时候&#xff0c;后端要说话了&#xff1a;你这连的是我的地址吗&#xff1f;网络里这显示的也不对吧~ 前端: 额、不是在这里看的。既然你不相信我&#xff0c;…

wsl ubuntu18.04升级为cmake-3.15.3

wsl ubuntu18.04 默认的cmake为3.10&#xff0c;编译CMakeLists.txt经常需要高版本cmake。 升级过程如下&#xff1a; 下载cmake-3.15.3-Linux-x86_64.tar.gz wget https://cmake.org/files/v3.15/cmake-3.15.3-Linux-x86_64.tar.gz 解压文件 tar zxvf cmake-3.15.3-Linux-x86…

替代普通塑料吸头的PFA移液吸头

目前市场上的规格&#xff1a;0.01ml、0.05ml、0.1ml、0.2ml、0.5ml、1ml、2ml、5ml、10ml等均可定制加工PFA材质枪头&#xff0c;可以适配市场上大部分移液枪&#xff0c;普兰德&#xff0c;大龙&#xff0c;赛默飞&#xff0c;赛多利斯&#xff0c;力辰、吉尔森&#xff0c;瑞…

K8S哲学 - probe 探针

探针分类&#xff1a; liveness probe readiness probe startup probe Liveness Probe&#xff1a;用于检查容器是否还在运行。如果 Liveness Probe 失败&#xff0c;Kubernetes 会杀死容器&#xff0c;然后根据你的重启策略来决定是否重新启动容器。常见的做法是使用与 Readin…

error解决expression before ‘static‘

问题现象 报警如下 跳转到提示第125行&#xff0c;但是这行明显是没有问题的。 问题分析 经过排查可以看到&#xff0c;是120行的末尾\在S32DS编译器里面被认为是“接下一行”的意思&#xff0c;120行注释掉之后&#xff0c;后面的121行、122行、123行均被注释掉&#xff0c;…

2024年3月 青少年软件编程(图形化) 等级考试试卷(一级)

2024.3青少年软件编程&#xff08;图形化&#xff09; 等级考试试卷&#xff08;一级&#xff09; 一、 单选题(共 25 题&#xff0c; 共 50 分) 1.单击下列哪个按钮&#xff0c; 能够让舞台变为“全屏模式” &#xff1f; &#xff08; &#xff09; A. B. C. D. 标准答案&am…

Redis系列3:高可用之主从架构

1 主从复制介绍 上一篇《Redis系列2&#xff1a;数据持久化提高可用性》中&#xff0c;我们介绍了Redis中的数据持久化技术&#xff0c;包括 RDB快照 和 AOF日志 。有了这两个利器&#xff0c;我们再也不用担心机器宕机&#xff0c;数据丢失了。 但是持久化技术只是解决了Redi…

Redis进阶——相互关注Feed流推送

目录 关注和取消关注业务需求实现步骤效果如下 共同关注业务需求实现步骤效果如下 Feed流实现方案Feed流简介三种Timeline方式三种模式对比 推送到粉丝收件箱业务需求Feed流的滚动分页 实现分页查询收件箱业务需求具体步骤如下 关注和取消关注 业务需求 当我们进入到笔记详情…

如何用C++写一个日期计算器

目录 前言 代码的布局 设计数据 方法声明 方法的实现 获取某年某月的天数 *全缺省的构造函数 * 拷贝构造函数 *赋值运算符重载 *析构函数 日期天数 日期天数 日期-天数 日期-天数 前置 后置 后置-- 前置-- 实现比较大小运算符重载思路 >运算符重载 运算…

互联网通信原理

互联网通信原理 ISO/OSI(开放系统互连)的七层模型 注意事项 上三层是为用户提供服务的&#xff0c;下四层负责实际数据传输下四层的传输单位 传输层&#xff08;数据段&#xff09;、网络层&#xff08;数据包&#xff09;、数据链路层&#xff08;数据帧&#xff09;、物理层…

git基础教程(10) git push将本地修改推送到远端

git push 命令用于将本地分支的更新推送(上传)到远程仓库。命令的基本语法为: git push [<repository> [<refspec>...]]<refspec>的格式是<+><src>:<dst> 你可以理解成: git push <远程仓库名称> <本地分支名称>:<远…

MySQL数据库——15.连接的使用

常见的连接类型包括 INNER JOIN(内连接)、LEFT JOIN(左连接)和 RIGHT JOIN(右连接)。 INNER JOIN(内连接) INNER JOIN 也称为等值连接,它获取两个表中字段匹配关系的记录。具体用法如下: SELECT column1, column2, ... FROM table1 INNER JOIN table2 ON table1.col…

数据库系统概论(超详解!!!)第六节 触发器

数据的完整性是为了防止数据库中存在不符合语义的数据。 一种是在定义表时声明数据完整性&#xff0c;称为声明完整性。 另一种是在服务器端编写触发器来实现&#xff0c;称为过程完整性。完成比参照完整性约束和CHECK约束更复杂的数据约束。 1、触发器概述 触发器是一种特…

力扣经典150题第三十三题:最小覆盖子串

目录 解题思路与实现 - 最小覆盖子串问题描述示例解题思路算法实现复杂度分析测试与验证总结 感谢阅读&#xff01; 解题思路与实现 - 最小覆盖子串 问题描述 给定一个字符串 s 和一个字符串 t&#xff0c;返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字…

图文教程 | 2024年最新Typora激活使用教程合集

前言 汇总一下网上的三种方法。 &#x1f4e2;博客主页&#xff1a;程序源⠀-CSDN博客 &#x1f4e2;欢迎点赞&#x1f44d;收藏⭐留言&#x1f4dd;如有错误敬请指正&#xff01; 关于安装教程&#xff1a;http://t.csdnimg.cn/SCIQ8http://t.csdnimg.cn/SCIQ8自行跳转安装 一…

35. 【Android教程】视频页面:ViewPager

ViewPager 是一种可以让用户通过左右滑动来切换页面的控件&#xff0c;通过它我们可以展示超过屏幕尺寸大小的内容&#xff0c;在某种程度上它可以说是实现多页面的最佳方式&#xff0c;同时 ViewPager 还支持任意动态的添加/删除页面。比如我们可以将不同的类别的内容分别放在…

java 创建和请求sse服务

主要依赖 <!--spring-boot父工程--><parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.2.RELEASE</version></parent><dependency><gro…