css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用
<!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用</title> <meta charset="utf-8" /> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var rel=0 $(".num").each(function(i){ $(this).click(function(){ rel=$(this).attr("rel")-1 $(this).css("background","#ccc").siblings().css("background","red"); $(".play").css("animation","none").animate({ 'margin-left':'-300'*rel+'px' },500) setTimeout(dq,10) }) }) function dq(){ $(".play").css({ 'animation-name': 'ma', 'animation-duration': '10s', 'animation-timing-function': 'ease-out', 'animation-delay': '-10'+2*rel+'s', 'animation-iteration-count':'infinite', 'animation-direction': 'alternate', }) } }) </script> <meta name="author" content="R.tian @eduppp.cn 2015"> <link rel="shortcut icon" href="http://eduppp.cn/images/logo4.gif" /> <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" /> <style type="text/css"> #frame {/*----------图片轮播相框容器----------*/ position: absolute; /*--绝对定位,方便子元素的定位*/ width: 300px; height: 200px; overflow: hidden;/*--相框作用,只显示一个图片---*/ border-radius:5px; } #dis {/*--绝对定位方便li图片简介的自动分布定位---*/ position: absolute; left: -50px; top: -10px; opacity: 0.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; } #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/ position: absolute;z-index:9px; width: calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/ } .play{ animation: ma 10s ease-out infinite alternate;/**/ } @keyframes ma {/*---每图片切换有两个阶段:位移切换和静置。中间的效果可以任意定制----*/ 0%,20% { margin-left: 0px; } 25%,40% { margin-left: -300px; } 45%,60% { margin-left: -600px; } 65%,80% { margin-left: -900px; } 85%,100% { margin-left: -1200px; } } .num{ position:absolute;z-index:10; display:inline-block; right:10px;top:165px; border-radius:100%; background:#f00; width:25px;height:25px; line-height:25px; cursor:pointer; color:#fff; text-align:center; opacity:0.8; } .num:nth-child(2){margin-right:30px} .num:nth-child(3){margin-right:60px} .num:nth-child(4){margin-right:90px} .num:nth-child(5){margin-right:120px} </style> </head> <body> <div id="frame" > <a id="a1" class="num" rel="1">1</a> <a id="a2" class="num" rel="2">2</a> <a id="a3" class="num" rel="3">3</a> <a id="a4" class="num" rel="4">4</a> <a id="a5" class="num" rel="5">5</a> <div id="photos" class="play"> <img src="http://eduppp.cn/images/0/1.jpg" > <img src="http://eduppp.cn/images/0/3.jpg" > <img src="http://eduppp.cn/images/0/4.jpg" > <img src="http://eduppp.cn/images/0/5.jpg" > <img src="http://eduppp.cn/images/0/2.jpg" > <ul id="dis"> <li>中国标志性建筑:天安门</li> <li>中国标志性建筑:东方明珠</li> <li>中国标志性建筑:布达拉宫</li> <li>中国标志性建筑:长城</li> <li>中国标志性建筑:天坛</li> </ul> </div> </div> </body> </html>
请使用高版本狐火打开,没写兼容。
animation-delay为负值时 动画状态是浏览器加载时的已经有了的状态,相当于提前加载。
注意: 'animation-delay': '-10'+2*rel+'s',
rel是点击时在HTML属性上传来的 全局变量
为什么乘以 2?
看关键帧和动画加载完成时间。总时间是10S;关键帧分为5段,所有10除以5得2。
css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用的更多相关文章
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- css3动画使用技巧之—border旋转时的应用。
<html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...
- css3动画使用技巧之——transform-delay为负值时的应用。
<html> <head> <title>css3动画delay为负值时的效果</title> <meta ch ...
- 用JQ去实现一个轮播效果
前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...
- 基于JQ的简单左右轮播图
// 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
- jQ实现图片无缝轮播
在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ( ̄▽ ̄)ノ. dom ...
- jq交叉淡入淡出轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 原生js+css3实现图片自动切换,图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
随机推荐
- TDD中的迭代
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:TDD中的迭代.
- Unrecognized Windows Sockets error: 0: JVM_Bind 异常解决办法
java.net.SocketException: Unrecognized Windows Sockets error: 0: JVM_Bind 此异常的原因是服务器端口被占用 所以解决办法是: 一 ...
- 淘宝HSF服务的原理以及简单的实现
淘宝HSF服务具体来说分三个应用:api接口,service服务,本地应用. 最基本的Api服务应该是十分干净的,不含方法,只有接口.它是要被打包(jar包的形式)到中央仓库去的. service服务 ...
- Java - 错误: "java.lang.ArrayIndexOutOfBoundsException: length=1; index=1"
错误: "java.lang.ArrayIndexOutOfBoundsException: length=1; index=1" 本文地址: http://blog.csdn.n ...
- mongodb地理位置索引
初始化集合(经度在前,纬度在后) ? 1 2 3 mongos> db.checkins.insert({ "_id" : "101", "lo ...
- [Ember] Creating Your First Ember.js Project with Ember-CLI
In this lesson, we'll setup Ember-CLI and use it to create and run our first Ember.js project. Insta ...
- [Canvas] Introduction to drawing with p5js
In this lesson we look at using color and the basic drawing methods of p5js, and how they can be com ...
- INSTALL_FAILED_VERSION_DOWNGRADE报错
error: INSTALL_FAILED_VERSION_DOWNGRADE 原因:模拟器或者实际的device中已经安装了同名的app,且本次的版本并不高 解决:在模拟器中卸载此同名应用,之后再运 ...
- web.xml配置文件 taglib
web.xml的内容如下: <?xml version="1.0" encoding="UTF-8"?><web-app version= ...
- Android_常用控件及适配器
TextView 控件中显示的内容必须是文本 TextView中常用的属性 android:text TextView中显示的文本内容 android:textColor 字体颜色 格式为#RGB # ...