Home > Article > Web Front-end > How to dynamically replace banner image path with JS tab_javascript skills
The example in this article describes the method of dynamically replacing the banner image path with JS tab. Share it with everyone for your reference. The specific analysis is as follows:
Here is a tab demonstrating how to dynamically replace an image, using a JS function to define the path of the replaced image when the mouse slides over it.
The parameter description is as follows:
obj The object that currently triggers the event
hc class name of the currently selected element
content Select the image whose path needs to be replaced
url is the path of the image
The code is as follows:
<!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>
I hope this article will be helpful to everyone’s JavaScript programming design.