你的位置:首页 > 网页设计

[网页设计]css3动画使用技巧之—JQ配合css3实现轮播之animation

<!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。