jQuery前后滚动洗牌式图片展示效果

点击左右键时会实现图片像洗扑克牌切换式的效果。

用法:

1.引入jQuery类库和相关js库

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.corner.js"></script>
<script type="text/javascript" src="js/jquery.roundabout.js"></script>
<script type="text/javascript" src="js/jquery.roundabout-shapes.js"></script>

2.定义效果内容:

<div id="gla">
	<div id="gla_box">
		<span class="prev">&nbsp;</span>
		<span class="next">&nbsp;</span>
		<ul>
			<li>
				<div class="gla_inbox">
					<p>电脑外包服务</p>
					<img src="images/20120814204816.jpg" />
					<a href="http://www.jqdemo.com/">点击了解详情</a>
				</div>
			</li>
			<li>
				<div class="gla_inbox">
					<p>网络外包服务</p>
					<img src="images/20120814204750.jpg" />
					<a href="http://www.jqdemo.com/">点击了解详情</a>
				</div>
			</li>
                 </ul>
	</div>
</div>

3.最后调用插件提供的方法:

$(function(){
		   
	$('.gla_inbox').corner('8px');
	
	$('#gla_box>ul').roundabout({
		minOpacity:1,
		btnNext: ".next",
		duration: 1000,
		reflect: true,
		btnPrev: '.prev',
		autoplay:true,
		autoplayDuration:5000,
		tilt:0,
		shape: 'figure8'
	});
	
});

原文转自:jQuery前后滚动洗牌式图片展示效果