Pure js to implement background image switching effect code_javascript skills

html code

Copy code The code is as follows:

Because javascript has a strong logical sequence, you must consider the location of the reference to js
css code

Copy code The code is as follows:

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 code part:

Copy code The code is as follows:

window.onload=init;
var element= document.getElementsByTagName("li");
function init() //Initialize background color
{
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 ") ;")); //Create events cannot be directly .onclick but need to use .attachEvent("event",new Function("called function("parameter");"));IE6 passes
else
element [i].addEventListener("click", new Function("bgchage(" k ");"),false);
}
}
function bgchage(t) //Change the background according to the color block Color
{
document.getElementsByTagName("body")[0].style.background="url(images/" t ".jpg)";
}
addclick();

In the js part, you should pay attention to the compatibility of writing events, and in fact, the idea of ​​​​jq is to write many functions in the form of plug-ins for your own use. If you write them in javascript, you can write your own class library for repeated use, and there is no need to Bear the burden of the jquery class library. In fact, I am not saying that jquery is not good. From a large perspective, the size of jquery plug-ins does not have a big impact. I watched the video of the Baidu front-end exchange conference and found that other people’s class libraries are also written by js itself. This It gave me the motivation to continue learning js.