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);
    }
}

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

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud注册nacos错误:Could not resolvplaceholder ‘xxxxx‘ in value “xxxx“

这个错误是我在做spirngcloud注册服务到nacos时发现的&#xff0c;算是折磨我折磨了好久&#xff0c;最后发现了还是先记录一下&#xff0c;首先还是说一下我的项目版本信息&#xff0c;因为不同的版本就有这不同的解决方案&#xff0c;这也是最恶心的一点&#xff0c;以至于我…

python 对图片进行操作

Pillow是一个强大的图像处理库&#xff0c;它提供了许多用于打开、操作和保存图像的功能。 Image模块&#xff1a; Image模块提供了用于打开、创建、编辑和保存图像的基本功能。可以使用Image.open()函数来打开图像文件&#xff0c;或者使用Image.new()函数来创建新的图像,还可…

基于 Win32 编程,使用 C语言开发一个记事本。

现在 Win32 非常少见&#xff0c;因为太原始了&#xff0c;同时也因为高级语言做应用开发速度更快。但是用 C 语言开发一个 win32 记事本对于理解应用程序运行的内部原理还是很有帮助的&#xff0c;“最基础的就是最有用的”&#xff0c;Windows 编程圣经 《Windows 程序设计》…

YOLO8实战:行人跌倒检测系统

yolo8行人跌倒检测系统 前言 随着科技的不断进步&#xff0c;人工智能和深度学习技术已广泛应用于各行各业&#xff0c;尤其是在人身安全检测方面。传统的跌倒检测方法依赖于人工观察&#xff0c;但这种方法不仅耗时耗力&#xff0c;而且容易因人为因素导致误判或漏判。因此&a…

【RSGIS数据资源】2018年北京森林站东灵山样地无人机遥感生态数据集

文章目录 一、数据集基本信息二、数据结构和内容三、 数据集质量控制&#xff08;一&#xff09; 产生方式&#xff08;二&#xff09; 数据源说明&#xff08;三&#xff09; 数据采集、加工处理方法 四、 数据使用 一、数据集基本信息 说明数据集基本描述信息&#xff0c;包…

在Milk-v Duo上部署YOLOV8模型

建议自己编译images固件&#xff0c;我使用官方给的固件在部署中出现了一些问题&#xff0c;请参考: 编译Milkv-duo固件-CSDN博客 下载YOLOv8 git clone https://github.com/ultralytics/ultralytics.git 下载yolo_export.zip 下载链接&#xff1a;链接&#xff1a;百度网盘…

Linux加强篇-Vim编辑器

目录 ⛳️推荐 Vim文本编辑器 编写简单文档 配置主机名称 配置网卡信息 配置软件仓库 ⛳️推荐 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站 Vim文本编辑器 在Linux系统中一切都…

使用FPGA实现除法器

介绍 除法都已经很熟悉了。这里我主要是使用fpga来实现一下除法器的功能。我这里使用的算法是&#xff0c;首先将除数进行左移n位&#xff0c;如果被除数比左移后的除数还要大&#xff0c;说明商的第n位是1&#xff0c;大家可以理解或者验证一下。 设计文件 library ieee; us…

Linux KASAN使用与实现原理

一、KASAN工具使用 KASAN工具&#xff1a;Kernel Address SANitizer(KASAN)是一种动态内存安全错误检测工具&#xff0c;主要功能是检查内存越界访问和使用已释放内存的问题。 1.1 KASAN宏控开关 KASAN有三种模式&#xff1a;1.通用KASAN&#xff1b;2.基于软件标签的KASAN&…

Apple II首席设计师为中国家庭设计,鹿客指脉锁S6 Max引领科技美学

智能门锁设计正在步入一个科技与艺术交织的美学时代。鹿客科技认为&#xff0c;智能门锁的设计理念是将锁视为人类与仿生形状之间的接口&#xff0c;将门视为几何建筑的一部分&#xff0c;产品设计应该通过提供诱人且用户友好的“触摸和感觉”来传达这种转变。 鹿客近日发布的最…

clickhouse学习笔记04

ClickHouse高可用之ReplicatedMergeTree引擎介绍 ClickHouse高可用架构准备-环境说明和ZK搭建 RPM安装ClickHouse 上传我们的clickhouse rpm文件。 安装&#xff1a; 中途需要输入用户名和密码 可以不设置 直接回车。 启动&#xff1a; 查看状态&#xff1a; 查看端口是否占用…

嵌入式s5p5818核心板介绍

底板寻址空间介绍 s5p6818 寻址空间采用统一编址方式进行管理 寻址空间映射图&#xff1a; 独立寻址&#xff1a;片内片外存储器只能选择其中一个 统一寻址&#xff1a;片内片外存储器都能使用&#xff0c;且使用的是同一片连续的寻址空间 reserved保留&#xff0c;Normaol …

晶振在PCB设计中,要注意哪些事项?

晶振(Crystal Oscillator)在PCB(Printed Circuit Board&#xff0c;印刷电路板)设计中扮演着至关重要的角色&#xff0c;因为它提供了稳定的时钟信号&#xff0c;这是许多电子设备正常运行的基础。在设计含有晶振的PCB时&#xff0c;应该注意以下几个关键事项&#xff1a; 1. …

实用电路图轻松掌握,一通百通 | 百能云芯

通过以下各种各样的实用电路&#xff0c;大家可以了解元器件的结构、特性、动作原理及电路的基本控制方式&#xff0c;掌握一些控制规律&#xff0c;这样的话&#xff0c;在日后的电路识图中就能融会贯通&#xff0c;一通百通。 文章中的电路图有难有易&#xff0c;有些图现在…

2024066期传足14场胜负前瞻

2024066期售止时间为4月24日&#xff08;周三&#xff09;17点30分&#xff0c;敬请留意&#xff1a; 本期1.5以下赔率5场&#xff0c;1.5-2.0赔率3场&#xff0c;其他场次是平半盘、平盘。本期14场难度中等。以下为基础盘前瞻&#xff0c;大家可根据自身判断&#xff0c;复选增…

想冲宇宙厂,直接挂了。。。

宇宙厂实际是字节&#xff0c;这个称呼是因为字节跳动主宰了宇宙内一切App&#xff0c;有点家大业大的意思。 今天分享一位字节春招凉经&#xff0c;问了一些数据库和Java八股&#xff0c;没出算法题&#xff0c;直接挂了&#xff0c;竟然最喜欢出算法题的字节&#xff0c;这次…

Web3革命:区块链如何重塑互联网

引言 互联网的发展已经深刻地改变了我们的生活方式&#xff0c;而现在&#xff0c;Web3和区块链技术正在为我们提供一个全新的数字世界的视角。本文将带你深入了解Web3的核心概念、技术特性以及它如何正在重塑我们的互联网体验。 从Web1.0到Web3&#xff1a;数字革命的演进 W…

Git TortoiseGit 详细安装使用教程

前言 Git 是一个免费的开源分布式版本控制系统&#xff0c;是用来保存工程源代码历史状态的命令行工具&#xff0c;旨在处理从小型到非常大型的项目&#xff0c;速度快、效率高。《请查阅Git详细说明》。TortoiseGit 是 Git 的 Windows Shell 界面工具&#xff0c;基于 Tortoi…

在Visual Studio配置C++的netCDF库的方法

本文介绍在Windows电脑的Visual Studio软件中&#xff0c;配置C 语言最新版netCDF库的方法。 netCDF&#xff08;Network Common Data Form&#xff09;是一种用于存储、访问和共享科学数据的文件格式和库&#xff0c;其提供了一种灵活的方式来组织、描述和存储多维数据&#…

Python-VBA函数之旅-id函数

目录 一、id函数的常见应用场景&#xff1a; 二、id函数使用注意事项&#xff1a; 1、id函数&#xff1a; 1-1、Python&#xff1a; 1-2、VBA&#xff1a; 2、推荐阅读&#xff1a; 个人主页&#xff1a;神奇夜光杯-CSDN博客 一、id函数的常见应用场景&#xff1a; id函…