焦点图和图片轮播,可以说几乎是每个网站必定会用到的内容。之前我有写过一个焦点图的插件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.代码优化)

DemoDownloadGithub

感谢您的阅读,本文由 蓝色梦想 版权所有。如若转载,请注明出处:蓝色梦想 - Ublue jQuery Image Carousel(焦点图&图片轮播)v2.2