纯js实现背景图片切换

最新推荐文章于 2022-04-28 15:39:39 发布

weixin_34007906

最新推荐文章于 2022-04-28 15:39:39 发布

阅读量399

点赞数

文章标签： javascript xhtml 前端 ViewUI

原文链接：http://www.cnblogs.com/Carson/archive/2010/11/14/1876972.html

版权

现在纯粹用js的人越来越少了，更多的人喜欢jquery，可使我还是喜欢javascript，下面给出一个用javascript写的背景切换的小例子，各位大虾不要骂，只是写给自己看的，也供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>
<!--    <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的位置

css代码

代码

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

javascript代码部分：

代码

1 window.onload = init;
2 var element = document.getElementsByTagName( " li " );
3 function init() // 初始化背景色
4 {
5
6 var element = document.getElementsByTagName( " li " );
7 for ( var i = 0 ; i < 4 ;i ++ )
8 {
9 var k = i + 1 ;
10 element[i].style.background = " url(images/ " + k.toString() + " .jpg) " ;
11 }
12 }
13
14
15 function addclick()
16 {
17 for ( var i = 0 ; i < 4 ;i ++ )
18 {
19
20 var k = i + 1 ;
21
22 if (window.attachEvent)
23 element[i].attachEvent( " onclick " , new Function( " bgchage( " + k + " ); " )); // 创建事件不能直接.onclick而需要使用.attachEvent("事件",new Function("被调函数("+参数+");"));IE6通过
24 else
25 element[i].addEventListener( " click " , new Function( " bgchage( " + k + " ); " ), false );
26
27 }
28 }
29
30 function bgchage(t) // 根据色块改变背景色
31 {
32 document.getElementsByTagName( " body " )[ 0 ].style.background = " url(images/ " + t + " .jpg) " ;
33 }
34
35 addclick();
36
37

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

转载于:https://www.cnblogs.com/Carson/archive/2010/11/14/1876972.html