图片滚动插件：jcarousellite

最新推荐文章于 2021-06-10 14:43:11 发布

原创最新推荐文章于 2021-06-10 14:43:11 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #ViewUI

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML5和JavaScript实现一个简洁美观的轮播图效果，包括轮播图的基本结构、样式设置、以及使用jQuery库简化开发过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码：

<!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>