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"> </span> <span class="next"> </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前后滚动洗牌式图片展示效果