jQuery广告幻灯片进度条,水平/左右切换,垂直/上下切换,自动播放,缩略图列表切换
在线实例
使用方法
<div class="sucaihuo" data-slidizle>
<ul data-slidizle-content>
<li style="background-image: url('img/01.jpg')"></li>
<li style="background-image: url('img/02.jpg')"></li>
<li style="background-image: url('img/03.jpg')"></li>
</ul>
<div data-slidizle-next>
<i class="fa fa-arrow-right"></i>
</div>
<div data-slidizle-previous>
<i class="fa fa-arrow-left"></i>
</div>
<ul data-slidizle-navigation></ul>
</div>
<script src="js/jquery.slidizle.js"></script>
<script>
$(function() {
$('.sucaihuo').slidizle();
});
</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 |
云盘内容
文件
| jQuery插件大全打包
|
内容
| HTML5+CSS3+PHP+jQuery等示例
|
大小
| 170M(300+个文件)
|
注意:示例只是当前的内容,【下载】的是全部jQuery插件一起打包后的文件。