jQuery旋转木马式幻灯片轮播特效

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

.carousel {  position: relative;  min-height: 20px;  height: auto !important;  height: 20px;  background: url(images/loader.gif) center center no-repeat;}.carousel .next, .carousel .prev {  display: none;  width: 56px;  height: 56px;  position: absolute;  bottom: 20px;  left: 50%;  margin-top: -28px;  z-index: 9999;  cursor: pointer;}.carousel .prev {  margin-left: -60px;  background: url(images/prev.png) 0 0 no-repeat;}.carousel .next {  margin-right: -60px;  background: url(images/next.png) 0 0 no-repeat;}.carousel li {  display: none;}.carousel li img {  width: 100%;  height: auto;}.paging {  position: absolute;  z-index: 9998;}.paging > a {  display: block;  cursor: pointer;  width: 40px;  height: 40px;  float: left;  background: url(images/dots.png) 0px -40px no-repeat;}.paging > a:hover, .paging > a.current {  background: url(images/dots.png) 0px 0px no-repeat;}.badge {  display: block;  width: 104px;  height: 104px;  background: url(images/badge.png) 0 0 no-repeat;  z-index: 9000;  position: absolute;  top: -3px;  left: -3px;}img {  -webkit-user-select: none; /* Chrome all / Safari all */  -moz-user-select: none;   /* Firefox all */  -ms-user-select: none;   /* IE 10+ */  -o-user-select: none;  user-select: none;}

$('.carousel ul').anoSlide({  items: 1,  speed: 500,  prev: 'a.prev',  next: 'a.next',  lazy: true,  auto: 4000})html<div class="carousel">  <a class="prev"></a>  <ul>    <li>Content goes here</li>    <li>Content goes here</li>    <li>Content goes here</li>  </ul>  <a class="next"></a></div>

$('.carousel[data-mixed] ul').anoSlide({  items: 5,  speed: 500,  prev: 'a.prev[data-prev]',  next: 'a.next[data-next]',  lazy: true,  delay: 100})

<div class="carousel" data-mixed=""> <a class="prev" data-prev=""></a> <ul>  <li>   <div class="wrap">    <figure><img data-src="images/slides/thumbnails/1.jpg" src="images/slides/1.jpg"></figure>   </div>  </li>  <li>   <div class="wrap">    <figure><img data-src="images/slides/thumbnails/2.jpg" src="images/slides/2.jpg"></figure>   </div>  </li>  <li>   <div class="wrap">    <figure><img data-src="images/slides/thumbnails/3.jpg" src="images/slides/3.jpg"></figure>   </div>  </li>  <li>   <div class="wrap">    <figure><img data-src="images/slides/thumbnails/4.jpg" src="images/slides/4.jpg"></figure>   </div>  </li>  <li>   <div class="wrap">    <figure><img data-src="images/slides/thumbnails/5.jpg" src="images/slides/5.jpg"></figure>   </div>  </li>  <li>   <div class="wrap">    <figure><img data-src="images/slides/thumbnails/6.jpg" src="images/slides/6.jpg"></figure>   </div>  </li>  <li>   <div class="wrap">    <figure><img data-src="images/slides/thumbnails/7.jpg" src="images/slides/7.jpg"></figure>   </div>  </li> </ul> <a class="next" data-next=""></a> </div>

$('.carousel ul').anoSlide({  items: 1,  speed: 500,  prev: 'a.prev[data-prev-paging]',  next: 'a.next[data-next-paging]',  lazy: true,  onConstruct: function(instance)  {    var paging = $('<div/>').addClass('paging fix').css(    {      position: 'absolute',      top: 1,      left:50 + '%',      width: instance.slides.length * 40,      marginLeft: -(instance.slides.length * 40)/2    })         /* Build paging */    for (i = 0, l = instance.slides.length; i < l; i++)    {      var a = $('<a/>').data('index', i).appendTo(paging).on(      {        click: function()        {          instance.stop().go($(this).data('index'));        }      });             if (i == instance.current)      {        a.addClass('current');      }    }     instance.element.parent().append(paging);  },  onStart: function(ui)  {    var paging = $('.paging');         paging.find('a').eq(ui.instance.current).addClass('current').siblings().removeClass('current');  }})

<div class="carousel">  <a class="prev"></a>  <ul>    <li>Content goes here</li>    <li>Content goes here</li>    <li>Content goes here</li>  </ul>  <a class="next"></a></div>

$('.carousel.captions ul').anoSlide({  items: 1,  speed: 500,  prev: 'a.prev[data-prev-caption]',  next: 'a.next[data-next-caption]',  lazy: true,  onStart: function(ui)  {    /* Remove existing caption in slide */    ui.slide.element.find('.caption').remove();  },  onEnd: function(ui)  {    /* Get caption content */    var content = ui.slide.element.data('caption');         /* Create a caption wrap element */    var caption = $('<div/>').addClass('caption').css(    {      position: 'absolute',       background: 'rgb(0,0,0)',      color: 'rgb(255,255,255)',      textShadow: 'rgb(0,0,0) -1px -1px',      opacity: 0.5,      top: -100,      left: 50,      padding: 20,      webkitBorderRadius: 5,      mozBorderRadius: 5,      borderRadius: 5    }).html(content);         /* Append caption to slide and animate it. Animation is really up to you. */    caption.appendTo(ui.slide.element).animate(    {      top:50    });  }})

<div class="carousel captions">  <a class="prev" data-prev-caption></a>  <ul>    <li data-caption="Adding captions is really easy">      <figure><img data-src="images/slides/1.jpg" src="" /></figure>    </li>    <li data-caption="anoSlide's callback functions can be used for adding Captions">      <figure><img data-src="images/slides/2.jpg" src="" /></figure>    </li>    <li data-caption="<span style='color:#00f0ff'>HTML - No problem</span><br /><br />It's really up to You to decide whether to use HTML or not.">      <figure><img data-src="images/slides/3.jpg" src="" /></figure>    </li>    <li>      <figure><img data-src="images/slides/4.jpg" src="" /></figure>    </li>    <li>      <figure><img data-src="images/slides/5.jpg" src="" /></figure>    </li>    <li>      <figure><img data-src="images/slides/6.jpg" src="" /></figure>    </li>    <li>      <figure><img data-src="images/slides/7.jpg" src="" /></figure>    </li>  </ul>  <a class="next" data-next-caption></a>  <a class="badge"></a></div>