首页 > 图片特效 / jquery特效插件 / > jquery插件movingboxes实现汽车展示效果

jquery插件movingboxes实现汽车展示效果

点击: 3270 , 发布日期: 2013-5-2
jquery插件movingboxes实现汽车展示效果

jquery插件movingboxes实现汽车展示效果

jquery插件movingboxes实现汽车展示效果,中间显示当前图片左右两边显示比当前图片小的小图片,可以点击对应的小图显示大图也可以通过左右箭头按钮与底部的焦点来切换。

jquery参数说明如下:

$(function(){
$('#box').movingBoxes({
startPanel   : 1,      
reducedSize  : .5,    
wrap         : true,  
buildNav     : true,   
navFormatter : function(){ return "●"; }
	});
	});

startPanel:设置哪张图片为默认展示的第一张图,1为第一张图片

reducedSize:设置旁边的略小的图片与大图片的大小比例。

wrap:设置当显示到第一张与最后一张时是否也显示箭头按钮。

buildNav:设置是否显示底部的焦点切换点。

navFormatter:自定义底部焦点的样式,不设置默认为123的数字。

jquery使用步骤:

第一步引入js与css

<link type="text/css" href="css/kaiwo.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="js/jquery.movingboxes.js"></script>

第二步在body中写入html标签

<ul id="box">
	<li><a href="http://www.kaiwo123.com" target="_blank"><img src="images/img01.jpg" alt="jquery插件movingboxes"></a></li>
	<li><a href="http://www.kaiwo123.com" target="_blank"><img src="images/img02.jpg" alt="jquery插件movingboxes"></a></li>
	<li><a href="http://www.kaiwo123.com" target="_blank"><img src="images/img03.jpg" alt="jquery插件movingboxes"></a></li>
	<li><a href="http://www.kaiwo123.com" target="_blank"><img src="images/img04.jpg" alt="jquery插件movingboxes"></a></li>
	<li><a href="http://www.kaiwo123.com" target="_blank"><img src="images/img05.jpg" alt="jquery插件movingboxes"></a></li>
</ul>

第三步jquery插件的调用

<script type="text/javascript">
	$(function(){
	$('#box').movingBoxes({
	startPanel   : 1,      // 默认展示的序列ID
	reducedSize  : .5,    // 小图与大图的大小比例
	wrap         : true,   // 左右箭头按钮控制
	buildNav     : true,   // 底部切换点
	navFormatter : function(){ return "●"; }// function which returns the navigation text for each panel
	});
		});
</script>

#box要与第二步的UL的ID对应。

关键词: jquery插件 图片特效 滑动 切换

注:用QQ登录后即可下载特效,当然你的积分是有限的,望好好利用与赚取!如何获得积分

我要评论
登录再评论
全部评论