1.使用javascript进行按钮的切换特效（这里是以图片按钮进行，图片放在images文件夹中，页面在同级目录中。）
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 切换效果 </title> 5 <script type="text/javascript"> 6 function changeleft(){ 7 var left1=document.getElementById("left1"); 8 var left2=document.getElementById("left2"); 9 var right1=document.getElementById("right1"); 10 var right2=document.getElementById("right2"); 11 var end1=document.getElementById("end1"); 12 var end2=document.getElementById("end2"); 13 14 left1.style.display="block"; 15 left2.style.display="none"; 16 right1.style.display="block"; 17 right2.style.display="none"; 18 end1.style.display="block"; 19 end2.style.display="none"; 20 } 21 function changeright(){ 22 var left1=document.getElementById("left1"); 23 var left2=document.getElementById("left2"); 24 var right1=document.getElementById("right1"); 25 var right2=document.getElementById("right2"); 26 var end1=document.getElementById("end1"); 27 var end2=document.getElementById("end2"); 28 left1.style.display="none"; 29 left2.style.display="block"; 30 right2.style.display="block"; 31 right1.style.display="none"; 32 end1.style.display="none"; 33 end2.style.display="block"; 34 } 35 </script> 36 </head> 37 38 <body> 39 <table cellpadding="0" cellspacing="0"> 40 <tr> 41 <td><input type="image" src="http://www.likecs.com/images/left1.jpg"><input type="image" src="http://www.likecs.com/images/left2.jpg"></td> 42 <td><input type="image" src="http://www.likecs.com/images/right1.jpg"><input type="image" src="http://www.likecs.com/images/right2.jpg"></td> 43 </tr> 44 <tr> 45 <td colspan="2"><input type="image" src="http://www.likecs.com/images/end1.jpg"><input type="image" src="http://www.likecs.com/images/end2.jpg" ></td> 46 </tr> 47 </table> 48 </body> 49 </html>