🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

Ublue is a simple clean yet highly configurable jQuery plugin for creating horizontal & vertical image carousel / sliders that supports autoplay, infinite loop, pager/button navigation, thumbnails and more.

Carousel

Documentation

##Ublue jQuery Image Carousel(焦点图&图片轮播)

###默认参数:


#####Dom节点

ubCon:".focusCon", 					// 内容(滚动时以该层做定位) ubItem:".item", 					// 列表项 ubIndicators:".focusIndicators", 	// 小按钮 ubPrev:".focusPrev",				// 向上按钮 ubNext:".focusNext", 				// 向下按钮 

#####效果设置

ubEffect:"left", 					// 效果呈现方式 "left" "top" "fade" ubTrigger:"hover", 					// 小按钮经触发条件 "hover" "click" ubAutoPlay:"on", 					// 是否自动播放 ubAutoBtn:"on", 					// 小按钮是否自动生成(便于做成缩略图形式) ubTitleHover:"off", 				// 标题是否滑动显示 ubMode:"off", 						// 是否开启多图滚动 

#####时间设置 (按毫秒计算:1000毫秒=1秒)

ubTime:5000, 						// 自动播放的时间间隔 ubSpeed:400, 						// 图片切换的速度 ubTitleSpeed:50 					// 标题滑过显示的速度 

###使用和设置方法(示例):


#####A. 图片轮播:单张滚动、自动滚动、无左右按钮

$(".demoA").ublue_ImageCarousel(); 		//默认调用方式(使用默认参数) 

#####B. 图片轮播:单张滚动、无小按钮、标题hover显示

$(".demoB").ublue_ImageCarousel({ 	ubAutoPlay:"off", 		// 关闭自动播放 	ubTitleHover:"on" 		// 标题hover显示 }); 

#####C. 图片轮播:多张滚动、小按钮点击切换

$(".demoC").ublue_ImageCarousel({ 	ubAutoPlay:"off", 		// 关闭自动播放 	ubTrigger:"click", 		// 小按钮点击切换 	ubMode:"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" // 小按钮不自动生成(手工做成缩略图形式) });

Demo:http://www.bluesdream.com/case/jquery/ublue-jquery-image-carousel/


You May Also Like