本文實例講述了JS選項卡動態替換banner圖片路徑的方法。分享給大家供大家參考。具體分析如下：
這裡演示一個選項卡演示如何動態替換圖片的方法，用一個JS函數實現的定義鼠標滑過替換圖片的路徑。
參數說明如下：
obj 當前觸發事件的對象
hc 當前選中元素的類名
content 選擇需要替換路徑的圖片
url 為圖片的路徑
代碼如下：
?
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 <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>選項卡動態替換banner圖片路徑</title> <script src="js/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ hoverFn($("ul li"),"hover_css",$("p img"),"big");//調用函數 /* 定義鼠標滑過替換圖片路徑的 函數 2012.8.24 作者 zoowar 參數說明 obj 當前觸發事件的對象 hc 當前選中元素的類名 content 選擇需要替換路徑的圖片 url 為圖片的路徑 */ function hoverFn(obj,hc,content,url){ obj.hover(function(){ var h_css=hc; $(this).addClass(h_css).siblings().removeClass(h_css); var imgUrl=$(this).attr(url); content.attr("src",imgUrl); }); } }) </script> <style type="text/css"> div{ width:1024px;height:768px;margin:0 auto; } ul{ width:1024px;height:40px;margin:0;padding:0; } ul li{ width:254px;line-height:40px; border-bottom:solid 2px #FB066F;text-align:center; list-style-type:none;float:left;margin-right:2px; background:#fff; } ul li.hover_css{ border-bottom:solid 2px #06F;background:#f0f0f0; } p{ margin:0;padding:0;text-align:center;padding-top:20px; } </style> </head> <body> <div> <ul> <li class="hover_css" big="images/wall_s1.jpg">風景</li> <li big="images/wall_s2.jpg">美女</li> <li big="images/wall_s3.jpg">帥鍋</li> <li big="images/wall_s4.jpg">惡搞</li> </ul> <p> <img src="images/wall_s1.jpg" /> </p> </div> </body> </html>希望本文所述對大家的javascript程序設計有所幫助。