div+CSS 图片轮播代码怎么写? 下面本篇文章给大家介绍一下使用 div+CSS 实现图片轮播. 有一定的参考价值, 有需要的朋友可以参考一下, 希望对大家有所帮助.
理论基础
CSS3 animation 属性和 @keyframes 规则
主体思想
准备相同大小的多个图片
将要展示图片横排放在一个图片容器里面
在图片容器外再加一个展示容器, 展示容器大小为图片大小
给图片容器添加自定义动画, 在动画不同阶段设置递增的偏移值
注意事项
动画效果分为切换和停留两部分
自定义动画阶段与图片数量相关
动画各阶段偏移值与图片大小相关
本文中示例最后一个图片到第一个图片没有切换效果, 一个思路是可以由最后一个图片再挨个切换到第一个图片
- html
- <div id="container">
- <div id="photo">
- <img src="1.png" />
- <img src="2.png" />
- <img src="3.png" />
- </div>
- </div>
解析:
这里创建了三个 img 元素, img 元素外面是图片容器, 图片容器外面是展示容器.
- CSS
- #container {
- width: 400px;
- height: 300px;
- overflow: hidden;
- }
- #photo {
- width: 1200px;
- animation: switch 5s ease-out infinite;
- }
- #photo> img {
- float: left;
- width: 400px;
- height: 300px;
- }
- @keyframes switch {
- 0%, 25% {
- margin-left: 0;
- }
- 35%, 60% {
- margin-left: -400px;
- }
- 70%, 100% {
- margin-left: -800px;
- }
- }
解析:
展示容器大小和图片大小一致
图片添加 float 效果, 不用考虑麻烦的 margin 问题
由于示例只有三个图片, 所以添加了三个动画阶段, 每一阶段都是通过设置递增的 margin-left 值达到切换的效果
设置的动画阶段 (如: 35%~60%) 是动画停留部分, 和上一阶段空余时间 (如 25%~35%) 即为动画切换部分, 各部分时间长短需要自己把控
运行效果
更多 web 前端 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/css3/17709.html