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



如需定制开发(网站开发、二次开发)在线咨询,请点击>> QQ:753511799

29 114 39



特效描述:7种按钮类型 图片滚动。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>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动导航菜单 图片头像上传 滚动切换 文件上传 图片滚动 文本框 文字滚动 下拉框 复选 图片文字滚动 单选 全屏滚动 登录框 页面滚动 注册框 搜索框 验证码 二级联动 三级联动 城市选择 value赋值 筛选 按钮控制 购物车 颜色选择 表单提交 全选/反选 添加删除 添加标签 密码强度验证 表单验证 html5按钮动画 按钮样式 密码修改设置 滚动流动 自动滚动图片轮播 切换按钮 form表单

×
×
51前端

注册

×
绑定手机

请绑定手机号,在继续操作

×
单次下载支付

应付金额:279

支付完成后,回到下载页面,在进行下载

官方QQ群
意见反馈
qq群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到