本文實例講述了jquery圖片切換實現方法。分享給大家供大家參考。具體如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script language="javascript" src="inc/jquery-1.4.2.js"></script> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無標題文檔</title> </head> <style type="text/css"> #butt div{ width:122px; height:32px; float:left; text-align:center; } </style> <script language="javascript"> function tab_q(now_id) { if(now_id == null) { //alert($("#butt").find("div:visible").attr("id")) c_show_id = $("#cont").find("div:visible").attr("id"); //此時顯示按鈕的ID名稱 nums_id = c_show_id.substring(1,3); //截取B1後面的1，作為字符串放到C後面 b_show_id = "b"+ nums_id; //此時顯示內容的ID名稱 nums_next = parseInt(nums_id)+1 //alert(nums_next) if(nums_next<=8) //如果到最後一個的話，那麼就要跳回第一個 { } else { nums_next = 1 } }else { nums_next = now_id.substring(1,3); } $("#cont div").hide(); //讓所有的上面的div中的圖片消失。 //是為了羅出地方讓下一張圖片出現的。 $("#butt div").css({border:'#FF0000 0px solid'}); //讓所有按鈕的邊框消失。是為了讓下一個按鈕有邊框， //alert("#"+"c"+nums_next) $("#c"+nums_next).fadeIn() //讓上面的圖片淡出來 $("#b"+nums_next).css({border:'#FF0000 1px solid'}); //給下面對應的按鈕加上邊框，當然這裡也可以做其他的效果 //加邊框只是為了測試 } $(function(){ //當頁面加載完成 auto = setInterval("tab_q()",2000); //這裡修改切換的時間的 $("#cont div").each(function(i,n){ $(n).hover( function(){ clearInterval(auto) }, function(){auto=setInterval("tab_q()",2000); } ) }) $("#butt div").each(function(i,n){ $(n).hover( function(){ clearInterval(auto); tab_q($(this).attr("id")) },function(){auto=setInterval("tab_q()",2000); } ) }) }) </script> <body> <div style="width:980px; height:275px;"> <div style="width:980px; height:241px; overflow:hidden; text-align:center" id="cont"> <div style="width:980px; height:241px; text-align:center" id="c1"><img src="images/xmjz.jpg" width="980"/> </div> <div style="width:980px; height:241px; display:none; text-align:center" id="c2"> <img src="images/4037.jpg" width="980" height="241"/> </div> <div style="width:980px; height:241px; display:none; text-align:center" id="c3"><img src="images/4041.jpg" width="980" height="241"/></div> <div style="width:980px; height:241px; display:none; text-align:center" id="c4"> <img src="images/xmjz.jpg" width="980"/> </div> <div style="width:980px; height:241px; display:none;text-align:center" id="c5"> <img src="images/xmjz.jpg" width="980"/> </div> <div style="width:980px; height:241px; display:none;text-align:center" id="c6"> <img src="images/xmjz.jpg" width="980"/> </div> <div style="width:980px; height:241px; display:none;text-align:center" id="c7"> <img src="images/xmjz.jpg" width="980"/> </div> <div style="width:980px; height:241px; display:none;text-align:center" id="c8"> <img src="images/xmjz.jpg" width="980"/> </div> </div> <div style="width:980px; height:31px; border:#FF0000 0px solid" id="butt"> <div style="background-image:url(images/xmbtn_1.png)" id="b1"> </div> <div style="background-image:url(images/xmbtn_2.png)" id="b2"> </div> <div style="background-image:url(images/xmbtn_2.png)" id="b3"> </div> <div style="background-image:url(images/xmbtn_2.png)" id="b4"> </div> <div style="background-image:url(images/xmbtn_2.png)" id="b5"> </div> <div style="background-image:url(images/xmbtn_2.png)" id="b6"> </div> <div style="background-image:url(images/xmbtn_2.png)" id="b7"> </div> <div style="background-image:url(images/xmbtn_2.png)" id="b8"> </div> </div> </div> </body> </html>