基于jQuery大众型slider实现,只需在使用时更改CSS。
两三年前写的一个插件,这个插件是我写的第一个可复用的JS,后来工作性质变了,不再使用到幻灯片。
昨天看到了这个插件,抽时间把这块重写了一下,优化后的文件名:Au_slider2.0。
文件本身并不大,只是用了一些高清的图片。JS未压缩只有7kb
注:console.log在IE中支持 的并不好,在项目中用到的时候,需要将这类代码注掉
@baukh20140710:修复IE7下样式问题。
/* @baukh20140625 Au_slider:幻灯插件 init方法中arg参数说明 $arg.sliderArea :幻灯区域 $arg.slider_img :图片区 $arg.slider_name :名称区 $arg.slider_change :切换区 $arg.sliderTime :动画切换时间 $arg.isAutoChange :是否自动切换 $arg.isShowNum :是否在切换区显示图片排序 */
$(function(){ //调用方法,可以传参 /* 传参方法 var pre={ sliderArea :幻灯区域 slider_img :图片区 slider_name :名称区 slider_change :切换区 sliderTime :动画切换时间 isAutoChange :是否自动切换 isShowNum :是否在切换区显示图片排序 } */ var pre = { sliderTime : 2000, isAutoChange : true, isShowNum : true } Au_slider.init(pre); })
/* */ var pre = { sliderArea :'.s1', sliderTime : 2000, isAutoChange : true, isShowNum : true } Au_slider.init(pre); var pre = { sliderArea :'s2', sliderTime : 3000, isAutoChange : true, isShowNum : true } Au_slider.init(pre);
/* 通过配置不同的sliderArea的幻灯容器 并分别加域,需要注意的是如果存在多个幻灯时,需进行多次初始化。 */ var pre = { sliderArea :'.s1', sliderTime : 2000, isAutoChange : true, isShowNum : true } Au_slider.init(pre); var pre = { sliderArea :'.s2', sliderTime : 3000, isAutoChange : true, isShowNum : true } Au_slider.init(pre);