小马过河的故事： 只有自己去尝试了，才会弄清它的深浅...
我写的这个其实很简单，可是花费了我好长时间，我之前没有写过太多的js，都是在网上直接复制人家的，之前我自认为自己写不出来，可是当我真正的去尝试后（虽然花费的时间有点长），最后才发现 原来不像我想象中的那么复杂、、、
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>图片的轮换</title> 6 <style type="text/css"> 7 body, div { margin: 0; paading: 0; font-size: 12px; } 8 ul, li { margin: 0; padding: 0; list-style: none; } 9 10 .box { position: relative; width: 960px; margin: 0 auto; padding-top: 15px; } 11 .list { overflow: hidden; position: relative; width: 250px; height: 320px; } 12 .list li img{ position: absolute; left: 0; top: 0; } 13 .list li { display: none; } 14 .list .over { display: block;} 15 .btn { position: absolute; bottom: 0; width: 250px; height: 26px; background: #000; line-height: 26px; opacity: 0.8; filter: alpha(opacity=80); text-align: right; } 16 .btn span { padding: 2px 5px; margin: 0 2px; border: 1px solid #fff; border-radius: 2px; background: #000; color: #fff; text-decoration: none; cursor: pointer; } 17 .btn .over { background: #f00; } 18 </style> 19 20 <script type="text/javascript" src="jquery-1.6.1.min.js"></script> 21 <script type="text/javascript"> 22 $(document).ready(function() { 23 var liarr = $("li"); 24 var aarr = $("span"); 25 var count = 0; 26 27 for(var i = 0; i < aarr.length; i++) { 28 $(aarr[i]).click ( function() { 29 if($(this).attr("class") == "over") { 30 return; 31 } 32 start(this); 33 }); 34 } 35 36 function start(obj) { 37 $("span[class='over']").removeAttr("class"); 38 $("li[class='over']").removeAttr("class"); 39 $(obj).addClass("over"); 40 count = $(obj).text()- 1 ; 41 $(liarr[count]).addClass("over"); 42 } 43 }); 44 </script> 45 </head> 46 47 <body> 48 49 <div class="box" id="box"> 50 51 <ul class="list"> 52 <li class="over"><img src="images/1.jpg" /></li> 53 <li><img src="images/2.jpg" /></li> 54 <li><img src="images/3.jpg" /></li> 55 <li><img src="images/4.jpg" /></li> 56 </ul> 57 <div class="btn" id="btn"> 58 <span class="over">1</span><span>2</span><span>3</span><span>4</span> 59 </div> 60 61 </div> 62 63 </body> 64 </html> 