切换点击的图片（一组图片），2张进行切换

点击哪张图片，哪张图片切换。点击两次，图片还原。

html：

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

css：

li {
    width: 112px;
    height: 200px;
    float: left;
    margin-right: 20px;
    background: url(img/1.jpg) no-repeat;
}

js：

window.onload = function(){
    var lis = document.getElementsByTagName('li');

    for(var i=0;i<lis.length;i++){//循环遍历每一个li
        lis[i].onOff = true;//给每个li添加一个开关，这样写的好处是不会相互影响
        lis[i].onclick = function(){            
            if(this.onOff){//如果点击的开关是真
                this.style.background = 'url(img/2.jpg)';
                this.onOff = false;//那么变成假
            }else{//否则如果开关是假
                this.style.background = 'url(img/1.jpg)';
                this.onOff = true;//那么开关变成真
            }                   
        }               
    }
}

注意：

1、设置开关,一个开关只能控制一组，我们现在有三组所以要设置三个开关，但三个开关不现实，所以我们要用自定义属性，给每一个li添加一个开关lis[i].onOff = true;
2、背景不能做判断， 相对路径不能做判断。所以我们要用开关。