今天利用jQuery实现了一个图片轮换插件,支持样式配置,支持弹出浮层查看单个图片
单击数字链接更换图片,鼠标停留到上面图片上暂停自动轮换
看看效果:
图1:默认配置时的效果
图2:默认配置时的效果
图3:单击图片,可以弹出浮层查看图片
配置项说明:
var options = { //宽度 'width':400, //高度 'height':250, //背景颜色 'backgroundColor':'#CCCCFF', //边框宽度 'borderWidth':5, //边框颜色 'borderColor':'black', //边框样式 'borderStyle':'solid', //图片轮换速度 'speed':'3s', //图片淡出速度 'fadeOutSpeed':300, //图片淡入速度 'fadeInSpeed':200, //图片队列的背景颜色 'queueBackgroundColor':'black', //图片队列高度 'queueHeight':25, //图片队列的透明渐变的样式 ,具体请参考CSS滤镜渐变样式说明 'queueStyle':1, //图片队列的开始透明度 'queueOpacity':30, //图片队列的结束透明度,当queueStyle!=0的情况下用到 'queueFinishOpacity':80, //图片队列标题的字体颜色 'queueTitleColor':'red', //图片队列标题的字体大小 'queueTitleFontSize':'16px', //图片队列标题的字体粗细 'queueTitleFontWeight':'normal', //图片队列连接字体颜色 'queueLinkColor':'white', //图片队列连接鼠标进入时字体颜色 'queueHoverColor':'orange' }
改变一下配置看看效果:
实例下载地址:
http://download.youkuaiyun.com/source/2684034