博主信息
博文 143
粉丝 1
评论 0
访问量 425479
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQuery旋转轮播式插件 CarouFredSel
弘德誉曦的博客
原创
5035人浏览过

是一款使用简单,支持自定义样式并且灵活健壮的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     指定某一元素控制内容向后

本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学