需要加载js有
<script type="text/javascript" src="js/jquery-1.7.2.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>
jquery.corner.js
jquery.roundabout.js
jquery.roundabout-shapes
#gla{ margin:0 auto; position:relative; background:url(../img/gla_bac.png); height:409px; overflow:hidden; } #gla_box{ width:700px; margin:auto; position:relative;} #gla_box .prev,#gla_box .next{ display:block; z-index:100; overflow:hidden; cursor:pointer; position:absolute; width:52px; height:47px; top:171px; } #gla_box .prev{ background:url(../img/btn.png) left bottom no-repeat; left:300px; top:350px; } #gla_box .next{ background:url(../img/btn.png) right bottom no-repeat; right:300px; top:350px; } .gla_inbox{ overflow:hidden; position:relative; } .gla_inbox p{ text-indent:1em; font-size:14px; width:100%; color:#FFFFFF; line-height:30px; background:#000000; } .gla_inbox a{ padding:5px; display:block; position:absolute; top:220px; left:90px; background:#0066CC; color:#FFF; } .gla_inbox img{ width:100%; height:100%;}
<div id="gla"> <div id="gla_box"> <span class="prev"> </span> <span class="next"> </span> <ul> <li> <div class="gla_inbox"> <img src="img/20120814204816.jpg" /> </div> </li> <li> <div class="gla_inbox"> <img src="img/20120814204750.jpg" /> </div> </li> <li> <div class="gla_inbox"> <img src="img/20120814204733.jpg" /> </div> </li> <li> <div class="gla_inbox"> <img src="img/20120814204711.jpg" /> </div> </li> <li> <div class="gla_inbox"> <img src="img/20120814204658.jpg" /> </div> </li> </ul> </div> </div>
<script type="text/javascript"> $(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' }); }); </script>