创建图片横向滑动的轮播组件,并自定义切换按钮,如果该按钮是组件生成的,在默认状态下是隐藏的,仅在鼠标 hover 时才会显示。并设置两个按钮用来控制暂停和继续。
var sc = new $.ui.Switchable( '#switchable2', { effects : 'slideX', nav : false, interval : 5000 }); $( '#runDemo1' ).on( 'click', function(){ sc.pause(); }); $( '#runDemo2' ).on( 'click', function(){ sc.play(); });
创建图片纵向滑动的轮播组件,并设置图片延迟加载,从第三组开始设置,组件在页面初始化时会默认加载前两组,当切换到第二组时会预加载第三组的图片,依次类推。
延迟加载的图片将真实的地址通过 data-lazysrc 存放在 img 标签上。
<img src="placeholder.png" data-lazysrc="001.jpg" alt="" />
src 是用来存放占位图片的地址,占位图片必须要有,不能为空。data-lazysrc 就是存放真实的图片地址。
new $.ui.Switchable( '#switchable3', { effects : 'slideY', imglazyload : true, // 开启图片延迟加载 interval : 4000 });