php 实现背景图片轮换,纯js实现背景图片切换效果代码

html代码

背景切换

因为javascript逻辑顺序比较强，所以要考虑引用js的位置

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代码部分：

window.οnlοad=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部分要注意写事件的兼容，而且其实jq的思路就是将很多功能写成插件的形式供自己使用，用javascript写，可以写自己的类库，供反复使用，也无需承担jquery类库的负担。其实我也不是说jquery不好，从大的方面来说，jquery的插件大小影响并不大，前端事件看了百度前端交流会的视频，发现人家的类库也都是js自己写的，这给了我继续学习js的动力。