jquery jcarousellite7种按钮类型图片滚动插件

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="js/easing.js"></script>

2. HTML代码

	<div class="carousel">
		<a href="javascript:void(0);" class="prev" id="prev-01">&nbsp </a>
		<div class="jCarouselLite" id="demo-01">
			<ul>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li>
			</ul>
		</div>
		<a href="javascript:void(0);" class="next" id="next-01">&nbsp </a>
		<div class="clear"></div>   
	</div><!--carousel end-->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#demo-01').jCarouselLite({
			btnPrev: '#prev-01',
			btnNext: '#next-01',
			visible:2
		});		
	});
	</script>
	<div class="carousel">
		<a href="javascript:void(0);" class="prev" id="prev-02">&nbsp </a>
		<div class="jCarouselLite" id="demo-02">
			<ul>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li>
			</ul>
		</div>
		<a href="javascript:void(0);" class="next" id="next-02">&nbsp </a>
		<div class="clear"></div>   
	</div><!--carousel end-->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#demo-02').jCarouselLite({
			btnPrev: '#prev-02',
			btnNext: '#next-02',
			auto: 800,
    		speed: 1000
		});		
	});
	</script>
	<div class="carousel">
		<a href="javascript:void(0);" class="prev disabled" id="prev-03">&nbsp </a>
		<div class="jCarouselLite" id="demo-03">
			<ul>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
			</ul>
		</div>
		<a href="javascript:void(0);" class="next" id="next-03">&nbsp </a>
		<div class="clear"></div>   
	</div><!--carousel end-->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#demo-03').jCarouselLite({
			btnPrev: '#prev-03',
			btnNext: '#next-03',
			circular: false,
			scroll: 2
		});		
	});
	</script>
	<div class="carousel">
		<a href="javascript:void(0);" class="prev" id="prev-04">&nbsp </a>
		<div class="jCarouselLite" id="demo-04">
			<ul>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li>
			</ul>
		</div>
		<a href="javascript:void(0);" class="next" id="next-04">&nbsp </a>
		<div class="clear"></div>   
	</div><!--carousel end-->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#demo-04').jCarouselLite({
			btnPrev: '#prev-04',
			btnNext: '#next-04',
			easing: "bounceout",
    		speed: 1000
		});		
	});
	</script>
	<div class="carousel-01">
		<a href="javascript:void(0);" class="prev" id="prev-05">&nbsp </a>
		<div class="jCarouselLite-01" id="demo-05">
			<ul>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li>
			</ul>
		</div>
		<div style="clear:both;"></div>
		<a href="javascript:void(0);" class="next" id="next-05">&nbsp </a>
	</div><!--carousel end-->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#demo-05').jCarouselLite({
			btnPrev: '#prev-05',
			btnNext: '#next-05',
			visible: 3,
			vertical: true,
			easing: "bounceout",
    		speed: 1000
		});		
	});
	</script>
	<div class="carousel-01">
		<a href="javascript:void(0);" class="prev" id="prev-06">&nbsp </a>
		<div class="jCarouselLite-01" id="demo-06">
			<ul>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li>
			</ul>
		</div>
		<a href="javascript:void(0);" class="next" id="next-06">&nbsp </a>
	</div><!--carousel end-->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#demo-06').jCarouselLite({
			btnPrev: '#prev-06',
			btnNext: '#next-06',
			visible: 3,
			vertical: true
		});		
	});
	</script>
	<div class="carousel">
		<a href="javascript:void(0);" class="prev" id="prev-07">&nbsp </a>
		<div class="jCarouselLite" id="demo-07">
			<ul>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery图片滚动设置序号导航按钮和左右按钮控制单排图片滚动" src="images/1.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery flow 图片切换滚动插件 带分页索引按钮控制图片左右滚动" src="images/2.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片滚动 xslider 插件 按钮控制自动图片左右滚动、上下滚动" src="images/3.jpg" /></a></li>
				<li><a href="http://www.51qianduan.com/" target="_blank"><img height="150" width="150" alt="jquery 图片切换特效 鼠标点击左右按钮焦点图切换滚动" src="images/4.jpg" /></a></li>
			</ul>
		</div>
		<a href="javascript:void(0);" class="next" id="next-07">&nbsp </a>
		<div><button class="0">0</button><button class="1">1</button><button class="2">2</button></div>  
	</div><!--carousel end-->
	<script type="text/javascript">
	$(document).ready(function(){
		$('#demo-07').jCarouselLite({
			btnPrev: '#prev-07',
			btnNext: '#next-07',
			btnGo:[".0", ".1", ".2"]
		});		
	});
	</script>