<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <style> *{margin:0;padding:0;} body{font-size:12px;} #accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;} #accordion ul{list-style:none;} #accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;} #accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;} #accordion ul li img{display:block; float:right;} .bar01{left:0px;} .bar02{left:643px;} .bar03{left:664px;} .bar04{left:685px;} .bar05{left:706px;} .bar01 span{background:#09E0B5;} .bar02 span{background:#3D7FBB;} .bar03 span{background:#5CA716;} .bar04 span{background:#F28B24;} .bar05 span{background:#7C0070;} </style> <script type="text/javascript"> $(function(){ $('#accordion li').click(function() { $(this).animate({left:$(this).index()*21}); $(this).prevAll().each(function(){ $(this).animate({left:$(this).index()*21}); }); $(this).nextAll().each(function(){ $(this).animate({left:(727-(5-$(this).index())*21)}); }); }); }) </script> <title>手风琴效果</title> </head> <body> <div id="accordion"> <ul> <li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li> <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li> <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li> <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li> <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li> </ul> </div> </body> </html>
