JS实例（五）网页背景图片切换 - suvllian

　　最近做的一个前端的东西，最主要的问题就是实现点击图片切换网页的背景，想想就应该把背景图片切换的问题总结一下。

　　首先关于导致背景图片切换的事件不一定是点击，还可以是自动切换，或者鼠标经过等事件。还有很多引申的实例。

　　下面步入正题：

　　先讲讲我实现网页背景图片的方法：

　　首先在HTML中添加想要设置的背景图片，把想要显示的display属性设为正常的，不想要显示的display属性设为none。我想，这应该有一个好处就是在网页加载时，就把所有的图片已经加载了，只是要不要显示的问题。

<div id="fix1" class="fix"> <img src="images/5.jpg" width="100%" height="100%"></div>
<div id="fix2" class="fix1"> <img src="images/1.jpg" width="100%" height="100%"></div>
<div id="fix3" class="fix"> <img src="images/2.jpg" width="100%" height="100%"></div>

.fix1{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 102px;    
        }
.fix{
            position: fixed;
            width: 100%;
            height: 100%;
            top: 102px;
            display: none;       
        }

　　第二步就是使用DOM获取小图片的节点。

var obj1 = document.getElementById('fix1');
var obj2 = document.getElementById('fix2');
var obj3 = document.getElementById('fix3');

　　第三步就是在小图片被点击时触发事件，改变对应的display属性，这样就可以切换背景图片。

pic1.onmouseover =function(){
    obj1.className = "fix1";
    obj2.className = "fix";
    obj3.className = "fix";
    }

　　这样就实现了一个简单的背景图片的切换，主要就是设置两种CLASS属性，在鼠标点击时，将CLASSNAME变化，从而改变样式。实现改变背景图片的方法。

　　之前我也试过其他的方法，直接获取DOM节点，改变STYLE；将图片存在数组中，点击触发事件，背景图片直接换成数组中对应的链接；直接在标签中添加onclick事件。

　　但是试过了都不行，可能是我有些地方写错了，这些方法应该都是可用的。

　　再说一下常用的在网页中添加背景图片的方法：

　　1、直接在BODY属性中添加：

<body background="images.jpg">

　　2、在CSS中链接：

background:url('images.jpg');

　　或者：

background-image:url(图片地址);

　　3、在JavaScript中添加

posted on 2016-04-20 00:40 suvllian 阅读(1094) 评论(0) 收藏举报

刷新页面返回顶部