1. <!DOCTYPE html>
  2. <html>
  3.  <head>
  4.   <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用</title>
  5.   <meta charset="utf-8" />
  6.  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  7.   <script type="text/javascript">
  8.   $(function(){
  9. var rel=0
  10.       $(".num").each(function(i){
  11.           $(this).click(function(){
  12.               rel=$(this).attr("rel")-1
  13.  
  14.               $(this).css("background","#ccc").siblings().css("background","red");
  15.               $(".play").css("animation","none").animate({
  16.                   'margin-left':'-300'*rel+'px'
  17.               },500)
  18.  
  19.               setTimeout(dq,10)
  20.           })
  21.  
  22.       })
  23.  
  24.       function dq(){
  25.  
  26.           $(".play").css({
  27.               'animation-name': 'ma',
  28.             'animation-duration': '10s',
  29.             'animation-timing-function': 'ease-out',
  30.             'animation-delay': '-10'+2*rel+'s',
  31.             'animation-iteration-count':'infinite',
  32.             'animation-direction': 'alternate',
  33.           })
  34.       }
  35.  
  36.  })
  37.  
  38.   </script>
  39.     <meta name="author" content="R.tian @eduppp.cn 2015">
  40.     <link rel="shortcut icon"  href="http://eduppp.cn/images/logo4.gif" />
  41.     <link rel="apple-touch-icon" href="http://eduppp.cn/images/logo.gif" />
  42.   <style type="text/css">
  43.         #frame {/*----------图片轮播相框容器----------*/
  44.             position: absolute; /*--绝对定位，方便子元素的定位*/
  45.             width: 300px;
  46.             height: 200px;
  47.             overflow: hidden;/*--相框作用，只显示一个图片---*/
  48.             border-radius:5px;
  49.         }
  50.         #dis {/*--绝对定位方便li图片简介的自动分布定位---*/
  51.             position: absolute;
  52.             left: -50px;
  53.             top: -10px;
  54.             opacity: 0.5;
  55.         }
  56.         #dis li {
  57.             display: inline-block;
  58.             width: 200px;
  59.             height: 20px;
  60.             margin: 0 50px;
  61.             float: left;
  62.             text-align: center;
  63.             color: #fff;
  64.             border-radius: 10px;
  65.             background: #000;
  66.         }
  67.         #photos img {
  68.             float: left;
  69.             width:300px;
  70.             height:200px;
  71.         }
  72.         #photos {/*---设置总的图片宽度--通过位移来达到轮播效果----*/
  73.             position: absolute;z-index:9px;
  74.             width: calc(300px * 5);/*---修改图片数量的话需要修改下面的动画参数*/
  75.         }
  76.         .play{
  77.             animation: ma 10s ease-out infinite alternate;/**/
  78.         }
  79.         @keyframes ma {/*---每图片切换有两个阶段：位移切换和静置。中间的效果可以任意定制----*/
  80.             0%,20% {        margin-left: 0px;        }
  81.             25%,40% {        margin-left: -300px;    }
  82.             45%,60% {        margin-left: -600px;    }
  83.             65%,80% {        margin-left: -900px;    }
  84.             85%,100% {        margin-left: -1200px;    }
  85.         }
  86.         .num{
  87.             position:absolute;z-index:10;
  88.             display:inline-block;
  89.             right:10px;top:165px;
  90.             border-radius:100%;
  91.             background:#f00;
  92.             width:25px;height:25px;
  93.             line-height:25px;
  94.             cursor:pointer;
  95.             color:#fff;
  96.             text-align:center;
  97.             opacity:0.8;
  98.         }
  99.         .num:nth-child(2){margin-right:30px}
  100.         .num:nth-child(3){margin-right:60px}
  101.         .num:nth-child(4){margin-right:90px}
  102.         .num:nth-child(5){margin-right:120px}
  103.  
  104.   </style>
  105.  </head>
  106.  <body>
  107.  <div id="frame" >
  108.         <a id="a1" class="num" rel="1">1</a>
  109.         <a id="a2" class="num" rel="2">2</a>
  110.         <a id="a3" class="num" rel="3">3</a>
  111.         <a id="a4" class="num" rel="4">4</a>
  112.         <a id="a5" class="num" rel="5">5</a>
  113.         <div id="photos" class="play">
  114.               <img src="http://eduppp.cn/images/0/1.jpg" >
  115.               <img src="http://eduppp.cn/images/0/3.jpg" >
  116.               <img src="http://eduppp.cn/images/0/4.jpg" >
  117.               <img src="http://eduppp.cn/images/0/5.jpg" >
  118.               <img src="http://eduppp.cn/images/0/2.jpg" >
  119.               <ul id="dis">
  120.                 <li>中国标志性建筑：天安门</li>
  121.                 <li>中国标志性建筑：东方明珠</li>
  122.                 <li>中国标志性建筑：布达拉宫</li>
  123.                 <li>中国标志性建筑：长城</li>
  124.                 <li>中国标志性建筑：天坛</li>
  125.               </ul>
  126.         </div>
  127. </div>
  128. </body>
  129. </html>

请使用高版本狐火打开，没写兼容。

animation-delay为负值时 动画状态是浏览器加载时的已经有了的状态，相当于提前加载。

注意： 'animation-delay': '-10'+2*rel+'s',

rel是点击时在HTML属性上传来的 全局变量

为什么乘以 2？

看关键帧和动画加载完成时间。总时间是10S；关键帧分为5段，所有10除以5得2。

css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用的更多相关文章

  1. JS、JQ实现焦点图轮播效果

    JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...

  2. css3动画使用技巧之—border旋转时的应用。

    <html> <head> <title>css3动画border旋转时的应用.</title> <meta charset="UTF- ...

  3. css3动画使用技巧之——transform-delay为负值时的应用。

    <html>    <head>        <title>css3动画delay为负值时的效果</title>        <meta ch ...

  4. 用JQ去实现一个轮播效果

    前提:用JQ去实现轮播效果一步步的做一个梳理. 首先肯定是轮播的HTML和CSS样式了: <body> <div class="pic"> <div ...

  5. 基于JQ的简单左右轮播图

    // 轮播图 主要实现思想: a.第一层div,设置overflow为hidden. b.里面是一个ul,每个li里面有个img或者为每个li设置背景图片也可以. c.li设置为左浮动,排成一行,还有 ...

  6. jQ实现的一个轮播图

    众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...

  7. jQ实现图片无缝轮播

    在铺页面的过程中,总是会遇到轮播图需要处理,一般我是会用swiper来制作,但总会有哪个几个个例需要我自己来写功能,这里制作了一个jq用来实现图片无缝轮播的dome,分享给大家ヽ(￣▽￣)ﾉ. dom ...

  8. jq交叉淡入淡出轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

随机推荐

  1. 五、SQL映射的XML文件

    MyBatis真正的力量是在映射语句中.这里是奇迹发生的地方.对于所有的力量,SQL映射的XML文件是相当的简单.当然如果你将它们和对等功能的JDBC代码来比较,你会发现映射文件节省了大约95%的代码 ...

  2. [Javascript] Gradient Fills on the HTML5 Canvas

    window.onload = function() { var canvas = document.getElementById("canvas"), context = can ...

  3. android111 java中调用c代码

    MainActivity: package com.itheima.helloworld1; import android.os.Bundle; import android.app.Activity ...

  4. android90 bind方式启动服务service调用service里的方法

    package com.itheima.banzheng; import com.itheima.banzheng.LeaderService.ZhouMi; import android.os.Bu ...

  5. UDP包的最大大小是多少?

      每个udp包的最大大小是多少?    65507 约等于 64K 为什么最大是65507?    因为udp包头有2个byte用于记录包体长度. 2个byte可表示最大值为: 2^16-1=64K ...

  6. apache+php+mysql最新版windows下

    卸载以前的Apache 1.控制面板先卸载 2.删除E:\Program Files (x86)\Apache Software Foundation下的apache目录 一.安装apache 1.c ...

  7. 使用HttpURLConnection实现在android客户端和服务器之间传递对象

    一般情况下,客户端和服务端的数据交互都是使用json和XML,相比于XML,json更加轻量级,并且省流量,但是,无论我们用json还是用xml,都需要我们先将数据封装成json字符串或者是一个xml ...

  8. c#中[Flags] 枚举类型定义问题_百度知道

    [Flags]的微软解释是“指示可以将枚举作为位域(即一组标志)处理.”其实就是在编写枚举类型时,上面附上Flags特性后,用该枚举变量是既可以象整数一样进行按位的“|”或者按位的“&”操作了 ...

  9. Mysql 数据库 操作语句

    mysql 格式语句规范 如何登陆你的数据库? 举例! 如果你的是 编译安装的花 那就得去编译安装后的那个目录中去,我的是安装到/usr/local/mysql 下登陆数据库:cd /usr/loca ...

  10. 重命名计算机名称导致TFS版本管理下的工作区问题的修复

    1.问题 若在本地已有工作区之后,此时修改计算机名称重启生效后,打开本地的项目解决方案,输出窗口会提示如下图: 2.解决 输入命令:tf workspaces /collection:http://1 ...