焦点图和图片轮播,可以说几乎是每个网站必定会用到的内容。之前我有写过一个焦点图的插件jQuery图片切换效果 – Ublue jQuery Slideshow 1.0。而今天的这个插件,可以说是在此基础上的一个重新编译和扩展,结合了焦点图与图片轮播,并且根据不同的参数设置和CSS样式,能够组合出多种呈现方式,基本能够满足日常所需要的一些使用。
功能说明(v2.2):
1.支持多图滚动
2.鼠标经过暂停自动播放
3.小按钮支持点击和滑动切换
4.标题支持滑动显示
5.图片滚动范围自适应(只要设置外层的容器宽度,内部图片会根据外层大小,自动调节滚动次数和距离)
6.支持左右滚动、上下滚动、渐变(淡入淡出)、缩略图模式
7.单个页面可重复使用
8.兼容IE6+、Chrome、Firefox、Safari、Opera
HTML CODE(通用结构):
<div class="focusMain isCarousel demoA"> <div class="focusArea"> <div class="focusCon"> <div class="item"> <h4 class="title"><a href="#">Space base</a></h4> <a href="#"><img src="images/img1.jpg" alt="" /></a> </div> <div class="item"> <h4 class="title"><a href="#">Festival Hall</a></h4> <a href="#"><img src="images/img2.jpg" alt="" /></a> </div> <div class="item"> <h4 class="title"><a href="#">Airplane at sunset</a></h4> <a href="#"><img src="images/img3.jpg" alt="" /></a> </div> <div class="item"> <h4 class="title"><a href="#">Railroad bridge</a></h4> <a href="#"><img src="images/img4.jpg" alt="" /></a> </div> <div class="item"> <h4 class="title"><a href="#">Midosuji line</a></h4> <a href="#"><img src="images/img5.jpg" alt="" /></a> </div> <div class="item"> <h4 class="title"><a href="#">Sky building</a></h4> <a href="#"><img src="images/img6.jpg" alt="" /></a> </div> </div> </div> <div class="focusIndicators"> </div> </div>
CSS CODE:
/* = 全局 -------------------------------------------------------------- */ body{ font:12px/18px Arial,\5FAE\8F6F\96C5\9ED1; background:url(../images/bg.png); padding-bottom:100px;} h2{ padding:80px 0 20px 0; text-align:center; font-size:16px; color:#444;} /* = 通用布局 -------------------------------------------------------------- */ .focusBtn, .focusIndicators a{ display:block; background:url(../images/script.png); background-repeat:no-repeat;} .focusMain{ width:650px; position:relative; margin:0 auto;} .focusArea{ width:594px; margin:0 auto 15px; position:relative; overflow:hidden;} .focusCon{ width:594px; position:absolute; top:0;} .focusItem{ position:relative; margin:0 4px; padding:1px; border:1px solid #666; background:#DDDEDE;} .focusCon .title{ height:26px; position:absolute; left:1px; bottom:1px; background:#000; opacity:.8; filter:Alpha(opacity=80); line-height:26px; font-size:14px; font-weight:400; overflow: hidden;} .focusCon .title a{ display:block; padding:0 10px; color:#FFF; position:relative;} .focusIndicators{ height:7px; font-size:0; line-height:0; text-align:center;} .focusIndicators a{ display:inline-block; width:7px; height:7px; margin:0 4px; background-position:0 -50px; font-size:0; _zoom:1; cursor:pointer; overflow:hidden;} .focusIndicators .current{ background-position:-10px -50px;} .focusBtn{ display:block; position:absolute; top:50%; width:24px; height:49px; margin-top:-25px; background-color:#606060; cursor:pointer;} .focusPrev{ left:0; background-position:0 0;} .focusNext{ right:0; background-position:-30px 0;} .focusPrev:hover, .focusNext:hover{ background-color:#333;} .focusItem img, .focusIndicators img{ width:100%; height:100%;} /* = 轮播和焦点图区分 -------------------------------------------------------------- */ .isCarousel .focusArea{ height:130px;} .isCarousel .focusItem{ float:left; width:186px; height:126px; _display:inline;} .isCarousel .focusCon .title{ width:186px;} .isCarousel .focusGroup{ float:left; _display:inline;} .isFocus .focusArea{ height:330px;} .isFocus .focusItem{ width:582px; height:326px;} .isFocus .focusCon .title{ width:582px;} /* = 特殊内容特殊处理 -------------------------------------------------------------- */ .demoB .focusCon .title{ bottom:-27px;} .demoD .focusItem{ float:left; _display:inline;} .demoF .focusItem{ display:none; position:absolute; top:0; left:0; } .demoG .focusItem{ display:none; position:absolute; top:0; left:0; } .demoG .focusIndicators{ height:42px;} .demoG .focusIndicators a{ width:60px; height:40px; margin:0 2px; border:1px solid #000; background:none;} .demoG .focusIndicators .current{ border:1px solid #FFF;} .demoJ .focusItem{ float:left; _display:inline;} .demoJ .focusIndicators{ height:42px;} .demoJ .focusIndicators a{ width:60px; height:40px; margin:0 2px; border:1px solid #000; background:none;} .demoJ .focusIndicators .current{ border:1px solid #FFF;} .demoK .focusArea{ width:190px; height:390px; margin:0 auto;} .demoK .focusItem{ width:186px; height:126px; margin:0;} .demoK .focusCon{ width:190px;} .demoK .focusCon .title{ width:186px;}
默认参数:
/* ===================================================== // Dom节点 ubArea:'.focusArea', // 外层(上下无缝滚动时,以该层做定位) ubCon:'.focusCon', // 内容(滚动时以该层做定位) ubItem:'.focusItem', // 列表项 ubIndicators:'.focusIndicators', // 小按钮 ubPrev:'.focusPrev', // 向上按钮 ubNext:'.focusNext', // 向下按钮 // 效果展现 (以下为默认值) ubEffect:'left', // 效果呈现方式 'left' 'top' 'fade' 'leftSeamless' 'topSeamless' ubTrigger:'hover', // 小按钮经触发条件 'hover' 'click' ubAutoPlay:'on', // 是否自动播放 ubAutoBtn:'on', // 小按钮是否自动生成(便于做成缩略图形式) ubTitleHover:'off', // 标题是否滑动显示 ubGallery:'off', // 是否开启多图滚动 // 时间设置 (按毫秒计算:1000毫秒=1秒) ubTime:5000, // 自动播放的时间间隔 ubSpeed:480, // 图片切换的速度 ubTitleSpeed:50 // 标题滑过显示的速度 ===================================================== */
使用和设置方法(示例):
A. 图片轮播:单张滚动、自动滚动、无左右按钮 $(".demoA").ublue_ImageCarousel(); //默认调用方式(使用默认参数) B. 图片轮播:单张滚动、无小按钮、标题hover显示 $(".demoB").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubTitleHover:"on" // 标题hover显示 }); C. 图片轮播:多张滚动、小按钮点击切换 $(".demoC").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubTrigger:"click", // 小按钮点击切换 ubGallery:"on" // 开启多图滚动 }); D. 焦点图:左右滚动 $(".demoD").ublue_ImageCarousel({ ubAutoPlay:"off" // 关闭自动播放 }); E. 焦点图:向上下滚动 $(".demoE").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubEffect:"top" // 图片切换方式为上下滚动 }); F. 焦点图:渐变显示 $(".demoF").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubEffect:"fade" // 图片切换方式为渐变(淡入淡出) }); G. 焦点图:渐变显示、小按钮(缩略图)手工填写 $(".demoG").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubEffect:"fade", // 图片切换方式为渐变(淡入淡出) ubAutoBtn:"off" // 小按钮不自动生成(手工做成缩略图形式) }); H. 图片轮播:无缝左右滚动 $(".demoH").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubEffect:"leftSeamless" // 图片切换方式为无缝滚动 }); I. 图片轮播:无缝多张滚动 $(".demoI").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubEffect:"leftSeamless", // 图片切换方式为无缝滚动 ubGallery:"on" // 开启多图滚动 }); J. 焦点图:无缝左右滚动 $(".demoJ").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubEffect:"leftSeamless", // 图片切换方式为无缝滚动 ubAutoBtn:"off" // 小按钮不自动生成(手工做成缩略图形式) }); K. 焦点图:无缝上下滚动 $(".demoK").ublue_ImageCarousel({ ubAutoPlay:"off", // 关闭自动播放 ubEffect:"topSeamless", // 图片切换方式为无缝滚动 ubAutoBtn:"off" // 小按钮不自动生成(手工做成缩略图形式) });
提示:本插件涵盖了多种显示方式,大家可以根据“参数”并且结合“CSS”,组合出自己的内容。
更新日志:
2013.06.06 v1.3.0 beta(1.增加小按钮的触发条件 2.性能优化,小按钮和滚动标题,鼠标停留150ms后才执行)
2013.06.10 v1.3.1 beta(1.语句优化)
2013.06.28 v1.3.2 beta(1.兼容性调整)
2013.08.01 v1.3.3 beta(1.修复一个错误的判断条件)
2013.08.08 v2.0(1.新增上下滚动和缩略图模式 2.部分语句重新定义 3.逻辑优化 4.更为精简)
2013.10.21 v2.1(1.新增左右无缝滚动 2.语句优化)
2013.11.18 v2.2(1.新增上下无缝滚动 2.代码优化)
Pingback 引用通告: Ublue jQuery Image Scroll(无缝滚动) | 蓝色梦想