jQuery插件–图片轮换

  今天利用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 '
}

 

改变一下配置看看效果:

 

玄机博客
© 版权声明
THE END
喜欢就支持一下吧
点赞8 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片快捷回复

    暂无评论内容