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中的5个有趣的新技术
Apr 02 HTML / CSS
用CSS3写的模仿iPhone中的返回按钮
Apr 04 HTML / CSS
关于css中margin的值和垂直外边距重叠问题
Oct 27 HTML / CSS
Html5移动端获奖无缝滚动动画实现示例
Jun 25 HTML / CSS
HTML5验证以及日期显示的实现详解
Jul 05 HTML / CSS
HTML5 创建canvas元素示例代码
Jun 04 HTML / CSS
分享29个基于Bootstrap的HTML5响应式网页设计模板
Nov 19 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
HTML5 3D旋转相册的实现示例
Dec 03 HTML / CSS
HTML文本属性&amp;颜色控制属性的实现
Dec 17 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
Jan 03 HTML / CSS
浅析CSS在DevTools 中架构演变
Oct 05 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 flv视频时间获取函数
2010/06/29 PHP
PHP include任意文件或URL介绍
2014/04/29 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
win7安装php框架Yii的方法
2016/01/25 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
jQuery帮助之CSS尺寸(五)outerHeight、outerWidth
2009/11/14 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
Extjs的FileUploadField文件上传出现了两个上传按钮
2014/04/29 Javascript
Javascript中的高阶函数介绍
2015/03/15 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
javascript每日必学之封装
2016/02/23 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
BootStrap Table实现server分页序号连续显示功能(当前页从上一页的结束序号开始)
2017/09/12 Javascript
angular1配合gulp和bower的使用教程
2018/01/19 Javascript
React Form组件的实现封装杂谈
2018/05/07 Javascript
详解mpvue中使用vant时需要注意的onChange事件的坑
2019/05/16 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
[05:09]DOTA2-DPC中国联赛2月22日Recap集锦
2021/03/11 DOTA
Python+Django在windows下的开发环境配置图解
2009/11/11 Python
Python的lambda匿名函数的简单介绍
2013/04/25 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python单例模式的两种实现方法
2017/08/14 Python
Python实现注册、登录小程序功能
2018/09/21 Python
python实现代码统计器
2019/09/19 Python
opencv python在视屏上截图功能的实现
2020/03/05 Python
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
2014/05/08 HTML / CSS
谈一谈HTML5本地存储技术
2016/03/02 HTML / CSS
牛津在线药房:Oxford Online Pharmacy
2020/11/16 全球购物
新闻系毕业生推荐信
2013/11/16 职场文书
求职信范文怎么写
2014/01/29 职场文书
校企合作协议书
2014/04/16 职场文书
个人授权委托书范本格式
2014/10/12 职场文书
酒桌上的开场白
2015/06/01 职场文书
法定代表人免职证明
2015/06/24 职场文书
法制教育讲座心得体会
2016/01/14 职场文书