CSS3制作轮播图的一种方法


Posted in HTML / CSS onNovember 11, 2019

轮播图,网页上经常能看得见,画面比较精美,下面是纯CSS3的轮播图的一种

下面是style部分:

这几行都能明白吧

<style>
    *{margin:0;padding:0;}
    a{text-decoration:none}
    li{list-style:none;}

设计宽度不要超过轮播图片的总宽度再加不到第一张1张图片的宽度(加第一张1张图片的宽度是为了轮播效果看得见)我的是1500宽度和200的高度,再设置溢出隐藏(消除移动出显示区域还在显示)

#box{width:1500px;height:200px;margin:0 auto;overflow:hidden;}

1000%是比较懒的写法,为了把ul的宽度设置的宽一点,看着很夸张,因为至少需要超过总图片的宽度两倍再加不到1张图片的宽度为什么要两倍呢,因为图片是向左移动的(方向自行设置),移出去了后面没有图片补充就没有轮播效果

了,1000%够长了,就不用了去计算总图片的宽度了,当然,图片够多也可以不这么设置,只要设置总宽度宽度的一半在加上不到一张图片的宽度。轮播的动画的名字,多少时间轮播一次

#box ul{height:200px;width:1000%;animation:animal 4s linear infinite;}

设置浮动让所有图片一行显示和图片的宽度

#box ul li{float:left;width:133px;height:200px;}

设置鼠标滑过暂停

#box:hover ul{animation-play-state:paused;}

设置动画的动画名和轮播图移动方向(动画效果)

@keyframes animal {
        0%{margin-left:0;}
        100%{margin-left:-1463px;}
    }
</style>

下面是body部分

轮播图一般都可以点击访问,所以放在a标签内

<body>
<div id="box">
<ul>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
    <li><a href="#"><img src="images/2.jpg" /></a></li>
    <li><a href="#"><img src="images/3.jpg" /></a></li>
    <li><a href="#"><img src="images/4.jpg" /></a></li>
    <li><a href="#"><img src="images/5.jpg" /></a></li>
    <li><a href="#"><img src="images/6.jpg" /></a></li>
    <li><a href="#"><img src="images/7.jpg" /></a></li>
    <li><a href="#"><img src="images/8.jpg" /></a></li>
    <li><a href="#"><img src="images/9.jpg" /></a></li>
    <li><a href="#"><img src="images/10.jpg" /></a></li>
    <li><a href="#"><img src="images/11.jpg" /></a></li>
    <li><a href="#"><img src="images/1.jpg" /></a></li>
</ul>
</div>
</body>

实现轮播图的的方法不止一种。下次小编再给大家分享!
 

HTML / CSS 相关文章推荐
CSS3 text shadow字体阴影效果
Jan 08 HTML / CSS
探究 canvas 绘图中撤销(undo)功能的实现方式详解
May 17 HTML / CSS
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
Jul 19 HTML / CSS
html5中的input新属性range使用记录
Sep 05 HTML / CSS
基于html5 DeviceOrientation 实现微信摇一摇功能
Sep 25 HTML / CSS
HTML5 History API 实现无刷新跳转
Jan 11 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
基于HTML5陀螺仪实现ofo首页眼睛移动效果的示例
Jul 31 HTML / CSS
HTML5中外部浏览器唤起微信分享
Jan 02 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
html5视频常用API接口的实战示例
Mar 20 HTML / CSS
html5关于外链嵌入页面通信问题(postMessage解决跨域通信)
Jul 20 HTML / CSS
CSS3实现图片抽屉式效果的示例代码
Nov 06 #HTML / CSS
css3给背景图片加颜色遮罩的方法
Nov 05 #HTML / CSS
CSS3 边框效果
Nov 04 #HTML / CSS
CSS3中的display:grid,网格布局介绍
Oct 30 #HTML / CSS
使用CSS3实现SVG路径描边动画效果入门教程
Oct 21 #HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 #HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 #HTML / CSS
You might like
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
php数据类型判断函数有哪些
2013/09/23 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
页面版文本框智能提示JS代码
2009/11/20 Javascript
javascript event 事件解析
2011/01/31 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
JQuery对表单元素的基本操作使用总结
2014/07/18 Javascript
JS数组的遍历方式for循环与for...in
2014/07/31 Javascript
基于编写jQuery的无缝滚动插件
2014/08/02 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
JS防止网页被嵌入iframe框架的方法分析
2016/09/13 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
2017/02/19 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
cropper js基于vue的图片裁剪上传功能的实现代码
2018/03/01 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
Python 第一步 hello world
2009/09/25 Python
Python中的异常处理简明介绍
2015/04/13 Python
Python的Urllib库的基本使用教程
2015/04/30 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
Django 数据库同步操作技巧详解
2019/07/19 Python
python机器学习包mlxtend的安装和配置详解
2019/08/21 Python
Python二元赋值实用技巧解析
2019/10/25 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python交互模式基础知识点学习
2020/06/18 Python
结婚喜宴主持词
2014/03/14 职场文书
团队经理竞聘书
2014/03/31 职场文书
史学专业毕业生求职信
2014/05/09 职场文书
法院答辩状格式
2015/05/22 职场文书
新店开张宣传语
2015/07/13 职场文书
Spring中的使用@Async异步调用方法
2021/11/01 Java/Android
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python