jQuery+CSS3多种风格3D幻灯片特效

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

<link rel="stylesheet" href="refineslide-theme-dark.css" />

<script src="jquery/1.9.1/jquery.min.js"></script>

<script src="jquery.refineslide.js"></script>

<ul class="demo">

  <li class="group"> 

    <a href="#"> <img src="1.jpg" alt="" /> </a>

    <div class="rs-caption rs-bottom">

      <h3>Caption Area 1</h3>

      <p>Description 1</p>

    </div>

  </li>

  <li class="group"> 

    <a href="#"> <img src="2.jpg" alt="" /> </a>

    <div class="rs-caption rs-bottom">

      <h3>Caption Area 2</h3>

      <p>Description 2</p>

    </div>

  </li>

  <li class="group"> 

    <a href="#"> <img src="3.jpg" alt="" /> </a>

    <div class="rs-caption rs-bottom">

      <h3>Caption Area 3</h3>

      <p>Description 3</p>

    </div>

  </li>

</ul>

<script>

  $(function () {

    $('.demo').refineSlide({

    maxWidth: 850 // set to native image width (px)

    });

  });

</script>

maxWidth              : 800,      // Max slider width - should be set to image width

transition            : 'cubeV',  // String (default 'cubeV'): Transition type ('custom', random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV')

fallback3d            : 'sliceV', // String (default 'sliceV'): Fallback for browsers that support transitions, but not 3d transforms (only used if primary transition makes use of 3d-transforms)

customTransitions     : [],       // Arr (Custom transitions wrapper)

perspective           : 1000,     // Perspective (used for 3d transforms)

useThumbs             : true,     // Bool (default true): Navigation type thumbnails

useArrows             : false,    // Bool (default false): Navigation type previous and next arrows

thumbMargin           : 3,        // Int (default 3): Percentage width of thumb margin

autoPlay              : false,    // Int (default false): Auto-cycle slider

delay                 : 5000,     // Int (default 5000) Time between slides in ms

transitionDuration    : 800,      // Int (default 800): Transition length in ms

startSlide            : 0,        // Int (default 0): First slide

keyNav                : true,     // Bool (default true): Use left/right arrow keys to switch slide

captionWidth          : 50,       // Int (default 50): Percentage of slide taken by caption

arrowTemplate         : '<div class="rs-arrows"><a href="#" class="rs-prev"></a><a href="#" class="rs-next"></a></div>', // String: The markup used for arrow controls (if arrows are used). Must use classes '.rs-next' & '.rs-prev'

onInit                : function () {}, // Func: User-defined, fires with slider initialisation

onChange              : function () {}, // Func: User-defined, fires with transition start

afterChange           : function () {}  // Func: User-defined, fires after transition end