jQuery幻燈片插件anoSlide

拉丁傳說 2018-4-13 1177

anoSlide 是一個輕量級的 jQuery 幻燈片插件,未壓縮也不到 8KB,它具有以下特點:

  • 支持響應式
  • 支持內容混合(圖片/文字)
  • 無需 CSS
  • 支持圖片延遲加載
  • 支持回調函數
  • 支持自適應高度
  • 易于擴展

兼容

瀏覽器兼容:兼容所有瀏覽器,包括 IE6、IE7。

jQuery 兼容:兼容 1.7 及以上版本。

使用方法

1、引入文件

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

2、HTML

<div class="carousel">
?? ?<a class="prev"></a>
?? ?<ul>
?? ??? ?<li><a href="http://www.dowebok.com/"><img src="images/slides/1.jpg"></a></li>
?? ??? ?<li><a href="http://www.dowebok.com/"><img src="images/slides/2.jpg"></a></li>
?? ??? ?<li><a href="http://www.dowebok.com/"><img src="images/slides/3.jpg"></a></li>
?? ??? ?<li><a href="http://www.dowebok.com/"><img src="images/slides/4.jpg"></a></li>
?? ??? ?<li><a href="http://www.dowebok.com/"><img src="images/slides/5.jpg"></a></li>
?? ??? ?<li><a href="http://www.dowebok.com/"><img src="images/slides/6.jpg"></a></li>
?? ??? ?<li><a href="http://www.dowebok.com/"><img src="images/slides/7.jpg"></a></li>
?? ?</ul>
?? ?<a class="next"></a>
</div>

3、JavaScript

$(function(){
?? ?$('.carousel ul').anoSlide({
?? ??? ?items: 1,
?? ??? ?speed: 500,
?? ??? ?prev: 'a.prev',
?? ??? ?next: 'a.next'
?? ?});
});

配置

參數/方法 類型 默認值 說明
items 整數 5 幻燈片每頁可見個數
speed 整數 1000 幻燈片切換速度,以毫秒為單位
auto 整數 0 自動播放,值為一個整數,表示多久自動切換一次,單位為毫秒,0 表示不自動播放
autoStop 布爾值 true 鼠標懸停停止自動播放
next 字符串 為“下一個”綁定一個選擇器
prev 字符串 為“上一個”綁定一個選擇器
responsiveAt 整數 480 強制顯示1個幻燈片,適用于較小的視口,如移動設備
delay 整數 0 動畫延遲,0 表示不延遲
lazy 布爾值 false 圖片延遲加載
onConstruct 整數 初始化后的回調函數,可傳遞參數:
instance – Instance of anoSlide
onStart 整數 切換之前的回調函數,可傳遞參數:
ui.instance – Instance of anoSlideui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element
onEnd 整數 切換之后的回調函數,可傳遞參數:
ui.instance – Instance of anoSlide
ui.index – Number of current slideui.slide – Current slideui.slide.element – Current slide element

演 示 下 載

最新回復 (0)
返回
發新帖
下载麻将游戏四人麻将