建站资源下载详情
为您免费提供多种建站资源下载,包括网站模板下载、前端插件下载和字体下载!您只需注册为会员即可任意下载!

JQuery图片轮播插件carouFredSel

来源:易助科技网浏览量:17收藏

简介

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