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

2019-11-20 12:30:32

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery实现仿腾讯微博滑出效果报告每日天气的方法

下一篇：js操作css属性实现div层展开关闭效果的方法