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

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

　　推荐阅读

　　JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码

属性 speed ：设置图片切换的速度 width：组件的宽度 height：组件的高度 cellStructures：可设置效果矩阵的行列例如｛row:8,col:8｝注意，这个行列要和效果矩阵switchTable的行列对应方法 init（）：初始化 adds>>>详细阅读

本文标题：纯js实现背景图片切换效果代码

地址：http://www.17bianji.com/kaifa2/JS/25447.html

1/2 1