纯JavaScript实现背景图片切换功能详解

HTML结构实现

HTML结构部分

 
<!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>
<title>背景切换</title>
<link href="css/bgchage.css" type="text/css" rel="Stylesheet" />
</head>
<body>
<div><ul><li></li><li></li><li></li><li></li></ul></div>
<!-- <div>1</div><div>2</div><div>3</div><div>4</div>-->
</body>
<script src="js/bgchage.js" type="text/javascript" ></script>
</html>

由于JavaScript执行逻辑对代码顺序有严格要求，因此在引入JS文件时需特别注意其放置位置，确保在DOM加载完成后执行。

CSS样式定义

CSS样式代码部分

 
body {font-size:12px;}
div{ width:950px; height:800px; margin:0 auto; border:solid 1px #d0d0d0;}
li{ list-style-type:none;border:solid 1px #d0d0d0; float:left; margin: 1px; padding:0 5px; height:12px; width:10px;}
/*div{ width:6px; height:14px; margin:1px; padding:0 5px; float:left; border:solid 1px #d0d0d0;}*/

JavaScript逻辑与事件兼容

JavaScript逻辑代码部分

 
window.onload=init;
var element= document.getElementsByTagName("li");
function init() //初始化背景色
{ 
var element= document.getElementsByTagName("li");
for(var i=0; i<4;i++)
{ 
var k=i+1;
element[i].style.background="url(images/"+k.toString()+".jpg)";
} 
} 
function addclick()
{ 
for(var i=0; i<4;i++)
{ 
var k=i+1;
if(window.attachEvent)
element[i].attachEvent("onclick", new Function("bgchage("+k+");")); //创建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被调函数("+参数+");"));IE6通过
else
element[i].addEventListener("click", new Function("bgchage("+k+");"),false);
} 
} 
function bgchage(t) //根据色块改变背景色
{ 
document.getElementsByTagName("body")[0].style.background="url(images/"+t+".jpg)";
} 
addclick();

在编写JS事件处理时，必须注意浏览器的兼容性差异。例如，IE6及以下版本需要使用attachEvent，而标准浏览器使用addEventListener。此外，虽然jQuery等库提供了便捷的插件机制，但掌握原生JavaScript编写类库的能力同样重要，这有助于理解底层原理并避免引入额外库带来的性能负担。前端社区中许多轻量级库也是基于原生JS构建的，这为深入学习JS提供了良好动力。