基础 - 划过换图

结构

<div id="box">    <ul>        <li id="img01"><img src="http://img1.mm131.com/pic/1472/1.jpg" alt=""></li>        <li id="img02"><img src="http://img1.mm131.com/pic/1472/2.jpg" alt=""></li>        <li id="img03"><img src="http://img1.mm131.com/pic/1472/3.jpg" alt=""></li>        <li id="img04"><img src="http://img1.mm131.com/pic/1472/4.jpg" alt=""></li>        <li id="img05"><img src="http://img1.mm131.com/pic/1472/5.jpg" alt=""></li>    </ul></div>

样式

* {    margin: 0;    padding: 0;}#box {    width: 710px;    height: 195px;    padding-top: 1060px;    border: 5px solid #C81623;    margin: 0 auto;    background: #666666 url(http://img1.mm131.com/pic/1472/1.jpg) no-repeat 5px 5px;}#box ul {    overflow: hidden;    list-style: none;    padding: 0;}#box li {    float: left;    width: 142px;}#box li img{    width: 90%;    padding: 0 8px;}

行为

window.onload = function () {    var oBox = window.document.getElementById("box");    function weChangeBg(imgIndex,index) {        var oImg = window.document.getElementById(imgIndex);        oImg.onmouseover = function () {            oBox.style.backgroundImage = "url(http://img1.mm131.com/pic/1472/"+index+".jpg)";        }    }    weChangeBg("img01",1);    weChangeBg("img02",2);    weChangeBg("img03",3);    weChangeBg("img04",4);    weChangeBg("img05",5);}