JS选项卡动态替换banner图片路径的方法

前端技术 2023/09/05 JavaScript

本文实例讲述了JS选项卡动态替换banner图片路径的方法。分享给大家供大家参考。具体分析如下：

这里演示一个选项卡演示如何动态替换图片的方法，用一个JS函数实现的定义鼠标滑过替换图片的路径。

参数说明如下：

obj 当前触发事件的对象
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>选项卡动态替换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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/11834

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案