jQuery轮播图插件jCarousel

所属分类： JQ特效媒体幻灯片和轮播图

查看演示立即下载

插件描述：jQuery轮播图插件jCarousel提供六种轮播效果使用简单功能强大

特点

可以自动幻灯片

可以暂停/播放

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

可以直接移到任何计数器

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

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

这是垂直和水平已启用

可以有一个回调方法。

可以嵌套。

极轻的重量。只是 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>

完成了。

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery拖放插件Gridly
下一个特效： jQuery内容显示与隐藏插件readmore.js