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控制过程的图片轮播 运用 ...
随机推荐
- 新建虚拟SAN
在SCVMM中,在每台主机上新建虚拟SAN(所使用的FC适配器必须一起用NPIV,否则不可用),新建完成后,在其主机的Hyper-V管理器中也可以看到 每台主机上的虚拟SAN名称必须相同 之后就 ...
- ASM集群文件系统ACFS(ASM Cluster File System)
在11g R2中ASM文件支持包括数据文件,控制文件,归档日志文件,spfile,RMAN备份文件,Change Tracking文件,数据泵Dump文件盒OCR文件等.而推出的ACFS和Oracle ...
- java和c#md5加密不同
java的mad5加密后为32位字符串,c#直接加密后可能不是32位,位数也不确定. 普通的写法 public static string Md5(string sourcein) { var md5 ...
- JDK的帧--java.util包装工具库
题词 JDK,Java Development Kit. 首先,我们必须认识到,,JDK但,但设置Java只有基础类库.它是Sun通过基础类库开发,这是唯一的.JDK书写总结的类库.从技术含量来说,还 ...
- Java中各种排序算法
package org.rut.util.algorithm.support; import org.rut.util.algorithm.SortUtil; /** * @author treero ...
- Design Of A Modern Cache
http://highscalability.com/blog/2016/1/25/design-of-a-modern-cache.html MONDAY, JANUARY 25, 2016 AT ...
- Mac OS X 如何设置默认浏览器
有时候我们不希望在 Mac 中点击任何连接都打开的是 Safari,这需要修改默认浏览器设置,在 Mac OS X 中如何设置默认浏览器呢? 打开 Safari 的偏好设置,在「通用」选项卡中有「默认 ...
- Windows8下如何使用命令行--转载
原文地址:http://jingyan.baidu.com/article/a501d80ce26fecec630f5ee0.html 命令行可用于实现一些没有图形界面的操作,然而windows8下的 ...
- nyoj 24 素数距离问题
素数距离问题 时间限制:3000 ms | 内存限制:65535 KB 难度:2 描述 现在给出你一些数,要求你写出一个程序,输出这些整数相邻最近的素数,并输出其相距长度. ...
- 隐藏/显示 我的电脑盘符驱动…
组策略里更改即可:点击"开始"→"运行",输入"gpedit.msc",打开组策略.在窗口左侧的"本地计算机策略"中依次 ...