jQuery旋轉(zhuǎn)木馬式幻燈片輪播特效
本文為大家分享anoSlide是一款超輕型響應式jQuery旋轉(zhuǎn)木馬幻燈片插件,它適合在PC端與移動端實現(xiàn)旋轉(zhuǎn)木馬幻燈片特效。具體內(nèi)容如下
特點
- 響應式——適應任何視窗的寬度
- 混合內(nèi)容
- 不需要CSS
- 輕量級(< 8 kb未壓縮)
- 基于jQuery構(gòu)建
- 集成圖像預加載
- 回調(diào)函數(shù)——onConstruct onStart,onEnd
- 多個可配置選項
- 延遲加載圖片
- 自動旋轉(zhuǎn)
- 容易擴展
jquery實例:anoSlide使用方法
引入核心文件
<script src="js/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.anoslide.js"></script>
寫入基礎CSS樣式,可根據(jù)項目完全自定義
.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; }
jquery旋轉(zhuǎn)木馬anoSlide混合顯示
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>
jquery幻燈片anoSlide多圖
JS
$('.carousel[data-mixed] ul').anoSlide( { items: 5, speed: 500, prev: 'a.prev[data-prev]', next: 'a.next[data-next]', lazy: true, delay: 100})
HTML
<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>
jquery旋轉(zhuǎn)木馬anoSlide分頁
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'); } })
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>
jquery幻燈片anoSlide標題
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 }); } })
html
<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>
以上就是關(guān)于jQuery旋轉(zhuǎn)木馬式幻燈片輪播特效,希望對大家的學習有所幫助。
相關(guān)文章
jQuery基于json與cookie實現(xiàn)購物車的方法
這篇文章主要介紹了jQuery基于json與cookie實現(xiàn)購物車的方法,涉及jQuery操作json格式數(shù)據(jù)與cookie存儲購物車信息的相關(guān)技巧,需要的朋友可以參考下2016-04-04jquery調(diào)用wcf并展示出數(shù)據(jù)的方法
網(wǎng)上看了很多jquery調(diào)用wcf的例子,可能是主機的原因,我用的是gd主機,所以都沒有成功,昨天自己搞了一天,終于成功了,現(xiàn)把方法和代碼和大家分享2011-07-07jQuery EasyUI API 中文文檔 - NumberBox數(shù)字框
jQuery EasyUI API 中文文檔 - NumberBox數(shù)字框使用介紹,需要的朋友可以參考下。2011-10-10基于jquery的關(guān)于動態(tài)創(chuàng)建DOM元素的問題
在我們實際的項目之中,相信有很多的朋友直接使用了以下的格式創(chuàng)建DOM元素。2010-12-12