纯css实现轮播图
轮播图的实现原理其实是比较简单的
举个例子
<div class="main">
<div class="div-main"></div>
</div>
main的宽度是100px
div-main的宽度是500px
我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把
好了,先介绍个 css3的api
animation: myfirst 5s linear 2s infinite alternate;
myfirst:动画名
5s:动画多久执行完
linear:动画以什么曲线执行
2s:动画延迟多长时间执行
infinite:该参数是动画一直循环,可以写数字也行
alternate:只动画在倒过来执行
先介绍到这里,完整用法可以参考:css3动画api参考
下面上代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>RunJS</title>
</head>
<body>
<div id="frame" >
<div id="photos" class="play">
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<div class="img"></div>
<ul id="dis">
<li>111111111111111</li>
<li>22222222222222</li>
<li>33333333333333</li>
<li>44444444444444</li>
</ul>
</div>
</div>
</body>
</html>
#frame{position:absolute;width:302px;height:200px;overflow:hidden;border-radius:5px}
#dis{position:absolute;left:-50px;top:-10px;opacity:.5}
#dis li{display:inline-block;width:200px;height:20px;margin:0 50px;float:left;text-align:center;color:#fff;border-radius:10px;background:#000}
#photos .img{float:left;width:300px;height:200px;background-color:red;border-left:1px solid blue;}
#photos { position: absolute;z-index:; width: calc(301px * 4);/*---修改图片数量的话需要修改下面的动画参数*/ }
.play{ animation: ma 5s ease-out infinite alternate;}
@keyframes ma {
0%,25% { margin-left: 0px; }
30%,50% { margin-left: -300px; }
55%,75% { margin-left: -600px; }
80%,100% { margin-left: -900px; } }
正所谓什么代码也比不上一个 在线运行demo
纯css实现轮播图的更多相关文章
- 纯CSS实现轮播图效果,你不知道的CSS3黑科技
前言 轮播图已经是一个很常见的东西,尤其是在各大App的首页顶部栏,经常会轮番显示不同的图片. 一提到轮播图如何实现时,很多人的第一反应就是使用Javascript的定时器,当然这种方法是可以实现的. ...
- 拓展-教你手把手用纯CSS写轮播图
先看成品图[示例网址:][1] [1]: https://huruji.github.io/css-imitate-js/slider/index.html一.随便说几句####css3动画效果的强大 ...
- 使用css实现轮播图
使用css3实现图片轮播 前言:实现图片轮播的方式有很多种 ,例如js ,css 等等. 本文主要讲述使用纯css3实现轮播图 工具介绍: 使用的编辑器: Hbuilder 进入正题 html代码: ...
- 纯CSS焦点轮播效果-功能可扩展
个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...
- 纯 CSS 实现滑动轮播图效果
只使用css实现轮播图简单的操作 <!DOCTYPE html> <html lang="en"> <head> <meta charse ...
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- 纯CSS3实现轮播图
前言 纯css3实现的轮播图效果,和JavaScript控制的相比,简单高效了很多,但是功能也更加单一,只有轮播不能手动切换. 用什么实现的呢?页面布局 + animation动画 HTML部分 &l ...
- 使用css制作轮播图
<!--HTML代码--> <!DOCTYPE html> <html lang="en"><head> <meta char ...
随机推荐
- jQuery中的attr()和prop()使用
总结:除了checked.seleted这样的属性推荐用prop()外,其他的随意都可以. 原因如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML ...
- [转] 用Maven搭建多模块企业级项目
转自:http://www.cnblogs.com/quanyongan/archive/2013/05/28/3103243.html 首先,前面几次学习已经学会了安装maven,如何创建maven ...
- JUnit----单元测试
为什么进行单元测试? 1. 重用测试, 应付将来实现的变化. 2. 明确指定我的东西是没问题的. Failure, error的区别? Failure只测试失败, Error指程序本身出错 1. ne ...
- CDOJ 1269 ZhangYu Speech
预处理打表,sum[i][j]表示1.....i这些数字中 j 有几个.然后就很好处理询问了. #include<stdio.h> #include<math.h> #incl ...
- (中等) UESTC 360 Another LCIS ,线段树+区间更新。
Description: For a sequence S1,S2,⋯,SN, and a pair of integers (i,j), if 1≤i≤j≤N and Si<Si+1<S ...
- TCP/IP协议头部结构体(网摘小结)(转)
源:TCP/IP协议头部结构体(网摘小结) TCP/IP协议头部结构体(转) 网络协议结构体定义 // i386 is little_endian. #ifndef LITTLE_ENDIAN #de ...
- iOS 页面跳转,离开之前pop掉navigationController栈中的页面
http://blog.csdn.net/worldzhy/article/details/41312713 - (void)viewDidDisappear:(BOOL)animated { //因 ...
- iOS 发布流程
1.登陆苹果开发者中心http://developer.apple.com(99美元账号) 2.进入itunes connect 3.选择Manage Your Apps 4.选择Add New Ap ...
- C语言-数组
C语言中使用数组来存储相同类型的大批量数据. 数组: 数组名:起名规则和变量名一样: 定义数组:数组每个元素存储的数据类型+数组名[常量(时表示数组分配存储数据类型的个数也就是长度)]={每个元素,以 ...
- Web前端开发中的各种CSS规范
Reference: http://yusi123.com/2866.html 一.文件规范 1.文件均归档至约定的目录中(具体要求以豆瓣的CSS规范为例进行讲解): 所有的CSS分为两大类:通用类和 ...