纯js实现背景图片切换效果代码_javascript技巧

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;}*/

window.onload=init;
var element= document.getElementsByTagName("li");
function init() //初始化背景色
{
var element= document.getElementsByTagName("li");
for(var i=0; i{
var k=i+1;
element[i].style.background="url(images/"+k.toString()+".jpg)";
}
}
function addclick()
{
for(var i=0; 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();