Slider
基于jQuery幻灯模块
参数列表
/** * @mod switchable * @tuthor zhw * @param 参数列表 * effect: {String} 切换效果,默认为slide * showNav: {Boolean} 是否显示切换导航(0,1,2,3,4..),默认为true * showPage: {Boolean} 是否显示翻页(next,prev),默认为true * animateSpeed: {Number} 动画执行时间,默认为500 * interval: {Number} 帧切换间隔时间,默认为2000 * restartDelay: {Number} 停止后再次播放延迟时间,默认为2000 * pauseOnHover: {Boolean} 鼠标hover时不否停止播放,默认为true * loadImg: {Boolean} 是否加载延迟图片(<img data-src="..." />),默认为true * autoPlay: {Boolean} 是否自动播放 * transformFix: {Boolean} CSS3切换,目前未实现 * switchNavEvent: {String} 切换导航(0,1,2,3,4..)事件类型,默认为click * switchMainClass: {String} 切换项目Wrap类名,默认为switch_main * switchItemClass: {String} 切换项目类名,默认为switch_item * pageClass: {String} 翻页Wrap类名,默认为switch_page * pageItemClass: {String} 翻页项类名,默认为switch_page_item * navClass: {String} 切换导航(0,1,2,3,4..)Wrap类名,默认为switch_nav * navItemClass: {String} 切换导航(0,1,2,3,4..)项类名,默认为switch_nav_item * navCurrentClass: {String} 切换导航(0,1,2,3,4..)选中类名,默认为switch_nav_item_current * mixClass: {String} 切换图片项类名,默认为item,用于图片滚动切换中,未实现真正图片无缝滚动,利用mixClass组合凑整以幻灯形式切换 **/
快速开始
使用requireJS
<script src="lib/require.js"></script> <script> require.config({ paths: { 'jquery': 'lib/jquery' ,'switchable': 'lib/switchable' } }); require(['jquery', 'switchable'], function($, switchable){ switchable({$element: $('#slides')}); }); </script>
不使用requireJS
<script src="lib/jquery.js"></script> <script src="lib/switchable.js"></script> <script> switchable({$element: $('#slides')}); </script>