图片滚动插件：jcarousellite

raymond.chen

浏览: 1437113 次
性别:
来自: 广州

最近访客更多访客>>

林祥纤

whzresponse

loginboot

vicento4

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

jquery

源码：

<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title> new document </title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
	<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
	<script type="text/javascript" src="jcarousellite_1.0.1.min.js"></script>
	<style type="text/css">
		.jCarouselLite li img{
			background-color: #fff;
			margin: 5px;
		}
	</style>
</head>

<body leftmargin=0 topmargin=0 rightmargin=0 bottommargin=0>
	<script language="javascript">
		jQuery(document).ready(function(){
			jQuery(".jCarouselLite").jCarouselLite({
				btnPrev: ".prev", //上一个按钮的class名
				btnNext: ".next", //下一个按钮的class名
				mouseWheel: true, //鼠标滑轮是否可以控制上下滚动，默认false
				auto: 0, //指定多少毫秒内容定期自动滚动。默认为空(null)不滚动
				speed: 1000, //滑动的速度
				vertical: false, //是否垂直滚动,默认为false
				circular: true, //是否循环滚动，默认为true
				visible: 2, //可见数量
				start: 0, //开始的地方，默认是0
				scroll: 1, //每次滚动的li数量
				beforeStart: function(a){ //滚动开始时回调的函数
					//alert(jQuery(a).attr("id"));
				},
				afterEnd: function(a){ //滚动结束时回调的函数
					//alert(jQuery(a).attr("id"));
				}
			});
		});
	</script>

	<table style="border:1px solid black;background-color:#B0C4DE;">
		<tr>
			<td valign=center><a class="prev">&lt;&lt;</a></td>
			<td>
				<div class="jCarouselLite">
					<ul>
						<li><img src="1.jpg" width="100" height="100"></li>
						<li><img src="2.jpg" width="100" height="100"></li>
						<li><img src="3.jpg" width="100" height="100"></li>
						<li><img src="1.jpg" width="100" height="100"></li>
						<li><img src="2.jpg" width="100" height="100"></li>
						<li><img src="3.jpg" width="100" height="100"></li>
					</ul>
				</div>
			</td>
			<td valign=center><a class="next">&gt;&gt;</a></td>
		</tr>
	</table>

</body>
</html>