是一款使用简单,支持自定义样式并且灵活健壮的jQuery旋转轮播插件:CarouFredSel,能够帮助你迅速的构建一个轮播式的幻灯展示,使用简单,功能强大,希望大家喜欢!
主要特性:
支持完整自定义和皮肤
支持responsive/fluid/liquid,保证各种客户端的显示
支持可变的显示项目个数
支持键盘和鼠标导航
7个内建的效果: none, scroll, directscroll, fade, crossfade, cover and uncover.
内建自定义的智能事件和加载选项
定义的高和宽中保证显示项目对齐(左/中/右).
支持动态添加和删除显示项目
幻灯创建后也可以支持获取,重置或者设置配置选项
如何使用?
以下是基本使用代码范例,如果大家有兴趣,可以参考CarouFredSel网站上的其它例子
HTML代码:
< class="image_carousel"> < 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" /> </> < class="clearfix"></> </>
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();
备注(主要特性)
参数列表:
参数名 默认值 说明
circular true 循环模式,true为无限循环,false为单轮循环。
infinite true 是否启用循环,默认起用。当circular设置为false的时候,再把infinite设置为false,就可以关闭循环。
direction "left" 播放动方向,可选值:"right", "left", "up" , "down".
width null 内容的宽度,如果为null,宽度自动计算
height null 内容的高度,如果为null,高度自动计算
padding 0 内容区域的padding
items 5 显示个数。默认显示5个。
scroll 默认等于显示的个数 一次播放动个数。
auto true 是否自动播放。设置成false,不自动播放。
prev null 指定某一元素控制内容向前
next null 指定某一元素控制内容向后