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

2024-05-06 16:19:53

字体：大中小

来源：转载

供稿：网友

这篇文章主要介绍了JS选项卡动态替换banner图片路径的方法,涉及javascript操作文件css样式的相关技巧,非常简单实用,需要的朋友可以参考下

本文实例讲述了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>