首页 / 脚本样式 / JavaScript / jQuery旋转木马式幻灯片轮播特效

• 响应式——适应任何视窗的宽度
• 混合内容
• 不需要CSS
• 轻量级（< 8 kb未压缩）
• 基于jQuery构建
• 集成图像预加载
• 回调函数——onConstruct onStart,onEnd
• 多个可配置选项
• 延迟加载图片
• 自动旋转
• 容易扩展

<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;}

JS

$（".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>

JS

$（".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>

js

$（".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>

js

$（".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>