< 返回技术文档列表

jQuery旋转轮播式插件CarouFredSel的用法

发布时间:2021-09-01 00:51:50⊙投诉举报

本篇内容主要讲解“jQuery旋转轮播式插件CarouFredSel的用法”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“jQuery旋转轮播式插件CarouFredSel的用法”吧!

介绍一款使用简单,支持自定义样式并且灵活健壮的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();

到此,相信大家对“jQuery旋转轮播式插件CarouFredSel的用法”有了更深的了解,不妨来实际操作一番吧!这里是血鸟云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


/template/Home/Zkeys/PC/Static