JQuery图片轮播插件carouFredSel

简介

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

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

3.  调用

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

相关链接

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

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

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