fractionslider - 带多重动画效果jQuery幻灯片插件

<link rel="stylesheet" href="css/fractionslider.css">

<script type="text/javascript" src="js/jquery.min.js"></script>

<script type="text/javascript" src="js/jquery.fractionslider.js"></script>

<div class="slider">

  <div class="slide"> 

  <img src="images/01_box_top.png" width="361" height="354"

            data-position="-152,142" data-in="left" data-delay="200"> 

  <img src="images/01_box_bottom.png" width="422" height="454"

            data-position="138,-152" data-in="bottomLeft" data-delay="200"> 

  <img src="images/01_waves.png" width="1449" height="115"

            data-position="240,17" data-in="left" data-delay="">

  <p data-position="30,30" data-in="top" data-step="1" data-speed="500"

     data-out="top" data-ease-in="easeOutBounce">jQuery Fraction Slider</p>

  <p data-position="90,30" data-in="left" data-step="2" data-speed="500"

      data-delay="500">animate multiple elements</p>

  <p data-position="90,30" data-in="left" data-step="2" data-special="cycle"

     data-speed="500" data-delay="3000">full control over each element</p>

  <p data-position="90,30" data-in="left" data-step="2"

  data-special="cycle" data-speed="500" data-delay="4500">opensource and free</p>

  <img src="images/01_outofthebox.png" width="652" height="559"

            data-position="20,330" data-in="bottomLeft" data-delay="500"> 

  </div>

  ......

</div>

$(window).load(function(){

  $('.slider').fractionSlider({

    'fullWidth': true // Full width, true of false

  });

});