JQuery 图片滚动插件 - jcarousel
2010-08-14 20:29 音乐让我说 阅读(6087) 评论(1) 编辑 收藏 举报代码1：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>演示1 - 入门</title>
<link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('#mycarousel').jcarousel();
});
</script>
</head>
<body>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li>
<li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li>
<li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li>
<li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li>
<li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li>
<li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li>
<li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li>
<li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li>
<li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li>
<li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li>
</ul>
</body>
</html>
效果图如下：
代码2：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>演示2 - 简单的配置</title>
<link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery('#mycarousel').jcarousel({
start: 3,
vertical: true, /* 是否垂直滚动 */
wrap: "circular", /* 循环 */
scroll: 3 /* 每次滚动的个数 */
});
});
</script>
</head>
<body>
<ul id="mycarousel" class="jcarousel-skin-tango">
<li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li>
<li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li>
<li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li>
<li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li>
<li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li>
<li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li>
<li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li>
<li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li>
<li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li>
<li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li>
</ul>
</body>
</html>
效果图如下：
代码3：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>演示3 - 多个同时滚动</title>
<link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
<link href="/css/JQueryJcarousel/skins/ie7/skin.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script type="text/javascript">
function carouselShape_initCallback(carousel)
{
carousel.buttonNext.bind('click', function()
{
carousel.startAuto(0);
});
carousel.buttonPrev.bind('click', function()
{
carousel.startAuto(0);
});
carousel.clip.hover(function()
{
carousel.stopAuto();
}, function()
{
carousel.startAuto();
});
};
jQuery(document).ready(function()
{
jQuery('.first-and-second-carousel').jcarousel(
{
auto: 1,
wrap: "last",
scroll: 3, /* 每次滚动的个数 */
initCallback: carouselShape_initCallback
});
jQuery('#third-carousel').jcarousel();
});
</script>
</head>
<body>
<ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">
<li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li>
<li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li>
<li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li>
<li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li>
<li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li>
<li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li>
<li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li>
<li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li>
<li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li>
<li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li>
</ul>
<hr size="1"/>
<ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-ie7">
<li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li>
<li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li>
<li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li>
<li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li>
<li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li>
<li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li>
<li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li>
<li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li>
<li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li>
<li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li>
</ul>
<hr size="1"/>
<ul id="third-carousel" class="jcarousel-skin-tango">
<li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li>
<li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li>
<li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li>
<li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li>
<li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li>
<li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li>
<li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li>
<li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li>
<li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li>
<li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li>
</ul>
<hr size="1"/>
</body>
</html>
效果图如下：
代码4：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>演示4 - 上一个、下一个、快速转到</title>
<link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.jcarousel-control { margin-bottom: 10px; text-align: center; }
.jcarousel-control a { font-size: 75%; text-decoration: none; padding: 0 5px; margin: 0 0 5px 0; border: 1px solid #fff; color: #eee; background-color: #4088b8; font-weight: bold; }
.jcarousel-control a:focus, .jcarousel-control a:active { outline: none; }
.jcarousel-scroll { margin-top: 10px; text-align: center; }
.jcarousel-scroll form { margin: 0; padding: 0; }
.jcarousel-scroll select { font-size: 75%; }
#mycarousel-next, #mycarousel-prev { cursor: pointer; margin-bottom: -10px; text-decoration: underline; font-size: 11px; }
</style>
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function mycarousel_initCallback(carousel)
{
jQuery('.jcarousel-control a').bind('click', function()
{
carousel.scroll(jQuery.jcarousel.intval(jQuery(this).text()));
return false;
});
jQuery('.jcarousel-scroll select').bind('change', function()
{
carousel.options.scroll = jQuery.jcarousel.intval(this.options[this.selectedIndex].value);
return false;
});
jQuery('#mycarousel-next').bind('click', function()
{
carousel.next();
return false;
});
jQuery('#mycarousel-prev').bind('click', function()
{
carousel.prev();
return false;
});
};
jQuery(document).ready(function()
{
jQuery("#mycarousel").jcarousel({
scroll: 1,
initCallback: mycarousel_initCallback,
// This tells jCarousel NOT to autobuild prev/next buttons
buttonNextHTML: null,
buttonPrevHTML: null
});
});
</script>
</head>
<body>
<div id="mycarousel" class="jcarousel-skin-tango">
<div class="jcarousel-control">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
<ul class="jcarousel-skin-tango">
<li><img src="http://images.cnblogs.com/001.jpg" width="75" height="75" alt="绿满家图片1" title="绿满家图片1" /></li>
<li><img src="http://images.cnblogs.com/002.jpg" width="75" height="75" alt="绿满家图片2" title="绿满家图片2" /></li>
<li><img src="http://images.cnblogs.com/003.jpg" width="75" height="75" alt="绿满家图片3" title="绿满家图片3" /></li>
<li><img src="http://images.cnblogs.com/004.jpg" width="75" height="75" alt="绿满家图片4" title="绿满家图片4" /></li>
<li><img src="http://images.cnblogs.com/005.jpg" width="75" height="75" alt="绿满家图片5" title="绿满家图片5" /></li>
<li><img src="http://images.cnblogs.com/006.jpg" width="75" height="75" alt="绿满家图片6" title="绿满家图片6" /></li>
<li><img src="http://images.cnblogs.com/007.jpg" width="75" height="75" alt="绿满家图片7" title="绿满家图片7" /></li>
<li><img src="http://images.cnblogs.com/008.jpg" width="75" height="75" alt="绿满家图片8" title="绿满家图片8" /></li>
<li><img src="http://images.cnblogs.com/009.jpg" width="75" height="75" alt="绿满家图片9" title="绿满家图片9" /></li>
<li><img src="http://images.cnblogs.com/010.jpg" width="75" height="75" alt="绿满家图片10" title="绿满家图片10" /></li>
</ul>
<div class="jcarousel-scroll">
<form action="">
<a href="#" id="mycarousel-prev">« 向上</a>
<select>
<option value="1">Scroll 1 item per click</option>
<option value="2">Scroll 2 items per click</option>
<option value="3">Scroll 3 items per click</option>
<option value="4">Scroll 4 items per click</option>
<option value="5">Scroll 5 items per click</option>
</select>
<a href="#" id="mycarousel-next">向下 »</a>
</form>
</div>
</div>
</body>
</html>
效果图如下：
代码5：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>演示7 - 入门</title>
<link href="/css/JQueryJcarousel/skins/tango/skin.css" rel="stylesheet" type="text/css" />
<script src="/js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="/js/jquery.jcarousel.min.js" type="text/javascript"></script>
<link href="../js/thickbox/thickbox.css" rel="stylesheet" type="text/css" />
<script src="../js/thickbox/thickbox.js" type="text/javascript"></script>
<script type="text/javascript">
// Set thickbox loading image
var tb_pathToImage = "/js/thickbox/loading-thickbox.gif";
var mycarousel_itemList = [
{ url: "/images/001.jpg", title: "Flower1" },
{ url: "/images/002.jpg", title: "Flower2" },
{ url: "/images/003.jpg", title: "Flower3" },
{ url: "/images/004.jpg", title: "Flower4" },
{ url: "/images/005.jpg", title: "Flower5" },
{ url: "/images/006.jpg", title: "Flower6" },
{ url: "/images/007.jpg", title: "Flower7" },
{ url: "/images/008.jpg", title: "Flower8" },
{ url: "/images/009.jpg", title: "Flower9" },
{ url: "/images/010.jpg", title: "Flower10" }
];
function mycarousel_itemLoadCallback(carousel, state)
{
alert("carousel.first：" + carousel.first + "。carousel.last：" + carousel.last);
for (var i = carousel.first; i <= carousel.last; i++)
{
if (carousel.has(i))
{
alert("已存在");
continue;
}
alert("还没有，则创建");
if (i > mycarousel_itemList.length)
{
break;
}
// Create an object from HTML
var tempObj = mycarousel_getItemHTML( mycarousel_itemList[i - 1] );
var item = jQuery(tempObj).get(0);
// Apply thickbox
tb_init(item);
carousel.add(i, item);
}
};
function mycarousel_getItemHTML(item)
{
var url_m = item.url.replace(/_s.jpg/g, '_m.jpg');
return '<a href="' + url_m + '" title="' + item.title + '"><img src="' + item.url + '" width="75" height="75" border="0" alt="' + item.title + '" /><br/><span>速度发生的斯蒂芬</span></a>';
};
jQuery(document).ready(function()
{
jQuery('#mycarousel').jcarousel({
size: mycarousel_itemList.length,
itemLoadCallback: { onBeforeAnimation: mycarousel_itemLoadCallback }
});
});
</script>
</head>
<body>
<ul id="mycarousel" class="jcarousel-skin-tango">
</ul>
</body>
</html>
更多请上该插件官网
等待更新...
作者：音乐让我说（音乐让我说 - 博客园）
出处：http://music.cnblogs.com/
文章版权归本人所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
