一款经典的jQuery slidizle 幻灯片

jQuery广告幻灯片进度条，水平/左右切换，垂直/上下切换，自动播放，缩略图列表切换

在线实例

默认效果	水平/左右切换	垂直/上下切换	循环
自动播放	缩略图	进度条	回调函数

使用方法

1. <div class="sucaihuo" data-slidizle> 
2.     <ul data-slidizle-content> 
3.         <li style="background-image: url('img/01.jpg')"></li> 
4.         <li style="background-image: url('img/02.jpg')"></li> 
5.         <li style="background-image: url('img/03.jpg')"></li> 
6.     </ul> 
7.  
8.     <div data-slidizle-next> 
9.         <i class="fa fa-arrow-right"></i> 
10.     </div> 
11.     <div data-slidizle-previous> 
12.         <i class="fa fa-arrow-left"></i> 
13.     </div> 
14.  
15.     <ul data-slidizle-navigation></ul> 
16. </div>
17. <script src="js/jquery.slidizle.js"></script> 
18. <script> 
19.     $(function() { 
20.         $('.sucaihuo').slidizle(); 
21.     }); 
22. </script>

复制

参数详解

参数	描述	默认值
timeout	幻灯片播放间隔	null
pauseOnHover	鼠标悬停暂停播放	false
nextOnClick	鼠标悬停暂停播放	false
loop	循环播放	false
autoPlay	自动播放	false
keyboardEnabled	键盘支持	true
touchEnabled	触摸事件支持	true
loadBeforeTransition	预加载	true
disabled
onInit	幻灯片被单击后的回调函数	null
beforeChange	幻灯片切换前的回调函数	null
onChange	幻灯片切换时的回调函数	null
afterChange	幻灯片切换后的回调函数	null
beforeLoading	加载幻灯片钱的回调函数	null
onLoading	加载幻灯片时的回调函数	null
afterLoading	加载幻灯片后的回调函数	null
onNext
onPrevious
onPlay	开始自动播放时的回调函数	null
onPause	暂停播放时的回调函数	null
onResume	恢复后的回调函数	null

---

下载