집 >웹 프론트엔드 >JS 튜토리얼 >배너 이미지 경로를 JS tab_javascript 기술로 동적으로 바꾸는 방법

배너 이미지 경로를 JS tab_javascript 기술로 동적으로 바꾸는 방법

WBOY원래의: 2016-05-16 15:59:591245검색

본 글의 예시에서는 배너 이미지 경로를 JS 탭으로 동적으로 교체하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 분석은 다음과 같습니다.

다음은 JS 함수를 사용하여 마우스가 이미지 위로 슬라이드할 때 교체된 이미지의 경로를 정의하여 이미지를 동적으로 교체하는 방법을 보여주는 탭입니다.

매개변수 설명은 다음과 같습니다.

obj 현재 이벤트를 트리거하는 객체
현재 선택된 요소의 hc 클래스 이름
내용 경로를 바꿔야 하는 이미지를 선택하세요
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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：AngularJS 기본 학습 노트에 대한 간략한 소개_AngularJS다음 기사：AngularJS 기본 학습 노트에 대한 간략한 소개_AngularJS

배너 이미지 경로를 JS tab_javascript 기술로 동적으로 바꾸는 방법

관련 기사