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 自定义字体font-face使用介绍
May 14 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
CSS3 实现弹幕的示例代码
Aug 07 HTML / CSS
使用CSS3实现input多选框自定义样式的方法示例
Jul 19 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
html5构建触屏网站之touch事件介绍
Jan 07 HTML / CSS
HTML5进阶段内联标签汇总(小篇)
Jul 13 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
Jan 31 HTML / CSS
HTML table 表格边框的实现思路
Oct 12 HTML / CSS
app内嵌H5 webview 本地缓存问题的解决
Oct 19 HTML / CSS
HTML通过表单实现酒店筛选功能
May 18 HTML / CSS
关于CSS浮动与取消浮动的问题
Jun 28 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 闭包特性在实际应用中的问题
2009/10/30 PHP
用php实现的获取网页中的图片并保存到本地的代码
2010/01/05 PHP
从零开始学YII2框架(三)扩展插件yii2-gird
2014/08/20 PHP
php读取csv数据保存到数组的方法
2015/01/03 PHP
smarty模板引擎之配置文件数据和保留数据
2015/03/30 PHP
Javascript中的delete介绍
2012/09/02 Javascript
Jquery动态改变图片IMG的src地址示例
2013/06/25 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
JS中的二叉树遍历详解
2016/03/18 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
一步一步实现Vue的响应式(对象观测)
2019/09/02 Javascript
vue相同路由跳转强制刷新该路由组件操作
2020/08/05 Javascript
JavaScript逻辑运算符相关总结
2020/09/04 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
轻松掌握python设计模式之访问者模式
2016/11/18 Python
一看就懂得Python的math模块
2018/10/21 Python
python批量下载网站马拉松照片的完整步骤
2018/12/05 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
Python使用selenium + headless chrome获取网页内容的方法示例
2019/10/16 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
opencv+pyQt5实现图片阈值编辑器/寻色块阈值利器
2020/11/13 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
介绍一下Make? 为什么使用make
2013/12/08 面试题
个人简历自我评价范文
2014/02/04 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
个人工作主要事迹
2014/05/08 职场文书
校长创先争优承诺书
2014/08/30 职场文书
学校四风问题对照检查材料思想汇报
2014/09/26 职场文书
2014幼儿园小班工作总结
2014/11/10 职场文书
小学教师党员承诺书
2015/04/27 职场文书
2015年宣传思想工作总结
2015/05/22 职场文书
三八妇女节主持词
2015/07/04 职场文书
js Proxy的原理详解
2021/05/25 Javascript
阿里云服务器部署RabbitMQ集群的详细教程
2022/06/01 Servers