焦点图和图片轮播，可以说几乎是每个网站必定会用到的内容。之前我有写过一个焦点图的插件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.代码优化）
感谢您的阅读，本文由 蓝色梦想 版权所有。如若转载，请注明出处：蓝色梦想 - Ublue jQuery Image Carousel（焦点图&图片轮播）v2.2
Pingback 引用通告： Ublue jQuery Image Scroll（无缝滚动） | 蓝色梦想