简介

carouFredSel是一款基于JQuery的图片轮播插件，功能强大而小巧，支持滚轮及键盘左右按键，加入其它插件可实现更加复杂的特效。

（下载的附件中附有DEMO）

参数说明：

参数名 默认值 说明
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 指定某一元素控制内容向后

使用

1.  引入jquery 、carouFredSel 和 需要的皮肤文件

2.  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;  
}

3.  调用

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

相关链接

官网地址 ：https://themeisle.com/

官方文档（英文） ：https://themeisle.com/category/11-caroufredsel

GitHub 地址 ：https://github.com/Codeinwp/carouFredSel-jQuery