分享一款强大的jQuery旋转轮播式插件 - CarouFredSel

分享一款强大的jQuery旋转轮播式插件 - CarouFredSel gbin1.com

 

在线演示   本地下载

今天我们介绍一款使用简单,支持自定义样式并且灵活健壮的jQuery旋转轮播插件:CarouFredSel ,能够帮助你迅速的构建一个轮播式的幻灯展示,使用简单,功能强大,希望大家喜欢!

主要特性:

  • 支持完整自定义和皮肤
  • 支持responsive/fluid/liquid,保证各种客户端的显示
  • 支持可变的显示项目个数
  • 支持键盘和鼠标导航
  • 7个内建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.
  • 内建自定义的智能事件和加载选项
  • 定义的高和宽中保证显示项目对齐(左/中/右).
  • 支持动态添加和删除显示项目
  • 幻灯创建后也可以支持获取,重置或者设置配置选项

如何使用?

以下是基本使用代码范例,如果大家有兴趣,可以参考CarouFredSel网站上的其它例子

 

HTML代码:

 

 

<div class="image_carousel">
	<div id="foo1">
		<img src="/examples/images/small/basketball.jpg" alt="basketball" width="140" height="140" />
		<img src="/examples/images/small/beachtree.jpg" alt="beachtree" width="140" height="140" />
		<img src="/examples/images/small/cupcackes.jpg" alt="cupcackes" width="140" height="140" />
		<img src="/examples/images/small/hangmat.jpg" alt="hangmat" width="140" height="140" />
		<img src="/examples/images/small/new_york.jpg" alt="new york" width="140" height="140" />
		<img src="/examples/images/small/laundry.jpg" alt="laundry" width="140" height="140" />
		<img src="/examples/images/small/mom_son.jpg" alt="mom son" width="140" height="140" />
		<img src="/examples/images/small/picknick.jpg" alt="picknick" width="140" height="140" />
		<img src="/examples/images/small/shoes.jpg" alt="shoes" width="140" height="140" />
		<img src="/examples/images/small/paris.jpg" alt="paris" width="140" height="140" />
		<img src="/examples/images/small/sunbading.jpg" alt="sunbading" width="140" height="140" />
		<img src="/examples/images/small/yellow_couple.jpg" alt="yellow couple" width="140" height="140" />
	</div>
	<div class="clearfix"></div>
</div>

 

CSS样式:

 

.image_carousel {
	padding: 15px 0 15px 40px;
}
.image_carousel img {
	border: 1px solid #ccc;
	background-color: white;
	padding: 9px;
	margin: 7px;
	display: block;
	float: left;
}
.clearfix {
	float: none;
	clear: both;
}
 
 

Javascript代码:

 

$("#foo1").carouFredSel(); 
 

 

你可能感兴趣的:(JavaScript,jquery)