JS選項卡動態(tài)替換banner圖片路徑的方法

更新時間：2015年05月11日 12:20:51 投稿：shichen2014

這篇文章主要介紹了JS選項卡動態(tài)替換banner圖片路徑的方法,涉及javascript操作文件css樣式的相關(guān)技巧,非常簡單實用,需要的朋友可以參考下

本文實例講述了JS選項卡動態(tài)替換banner圖片路徑的方法。分享給大家供大家參考。具體分析如下：

這里演示一個選項卡演示如何動態(tài)替換圖片的方法，用一個JS函數(shù)實現(xiàn)的定義鼠標滑過替換圖片的路徑。

參數(shù)說明如下：

obj 當前觸發(fā)事件的對象
hc 當前選中元素的類名
content 選擇需要替換路徑的圖片
url 為圖片的路徑

代碼如下：

<!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>選項卡動態(tài)替換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");//調(diào)用函數(shù) 
 /*
  定義鼠標滑過替換圖片路徑的
 函數(shù) 2012.8.24 
  作者 zoowar 
  參數(shù)說明
  obj 當前觸發(fā)事件的對象
  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程序設計有所幫助。

您可能感興趣的文章: