注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

超强的jQuery轮播图插件jCarousel应用

jQuery插件 fishcity 2237浏览

这是一款超强的jquery轮播图插件jcarousel应用,jCarousel可以用作自动幻灯片,支持暂停/播放功能,支持数字按钮,可以从任何数字开始。从零开始的幻灯片可以不使用计数器,当然,一个页面可以调用插件多次,也可以说可以设定多个轮播(焦点图),而且每个幻灯片都可以自由控制,标题可以内嵌到幻灯片中,而且在图片播放后可以回调一个函数,可以方便的写上自己需要的功能,嘿嘿,差点了忘了,这款插件jCarousel最牛的地方就它可以做为画廊来使用,非常的漂亮。不得不说这款只有4KB的插件jCarousel实在是太牛了。

下面来看下这款jquery插件jCarousel的使用方法吧。

1、添加下列代码在您的标头。

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.msCarousel-min.js"></script>
<link rel="stylesheet" type="text/css" href="css/mscarousel.css"/>

本例添加的样式只是测试目的。

.box {
    background:#000;
    padding:10px;
    height:200px;
    width:200px;
    margin:0 10px 0 0;
}
.box h1 {
    color:#999999;
    background:#000;
}

2、构建html

<div id="mycarousel">
  <div class="box">
    <h1>01</h1>
  </div>
  <div class="box">
    <h1>02</h1>
  </div>
  <div class="box">
    <h1>03</h1>
  </div>
  <div class="box">
    <h1>04</h1>
  </div>
  <div class="box">
    <h1>05</h1>
  </div>
</div>

3、这是最后一步,写入JS,初始化脚本。

$(document).ready(function() {
   mcarousel = $("#mycarousel").msCarousel({boxClass:'div.box', height:200, width:220}).data("msCarousel");
   //add click event
$("#next").click(function() {
    //calling next method
    mcarousel.next();
});
$("#previous").click(function() {
    //calling previous method
    mcarousel.previous();
});      
})

转载请注明:jQ酷 » 超强的jQuery轮播图插件jCarousel应用

下载地址:本站下载 | 百度云
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。