jQuery轮播图插件jCarousel

 查看演示  website  立即下载

特点

    可以自动幻灯片

    可以暂停/播放

    可以是从任何计数器开始。从零开始的幻灯片

    可以直接移到任何计数器

    一个页面可以有多个旋转木马

    每个旋转木马可以由他们自己的对象控制

    这是垂直和水平已启用

    可以有一个回调方法。

    可以嵌套。

    极轻的重量。只是 4 KB

如何使用？

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"/>

我添加的样式只是测试目的。

<style type="text/css">
.box {
    background:#000;
    padding:10px;
    height:200px;
    width:200px;
    margin:0 10px 0 0;
}
.box h1 {
    color:#999999;
    background:#000;
}
</style>

这是 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.这是最后一步。初始化脚本。

<script type="text/javascript">
$(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();
});      
})
</script>

完成了。

PREVIOUS:
NEXT:
jQuery内容显示与隐藏插件readmore.js
jQuery拖放插件Gridly