html ---------- <ul id="box"> <li class="first"><imgsrc="img/big_1.jpg"><div></div></li> <li><a href="javascript:;"><img src="img/small_1.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_2.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_3.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_4.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_5.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_1.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_2.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_3.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_4.jpg"></a></li> <li><a href="javascript:;"><img src="img/small_5.jpg"></a></li> </ul> css ---------- li{list-style: none;} body{background:rgb(31, 30, 30);} img{border-radius:30px;} #box{width:805px;overflow: hidden; border:5px solid rgb(240, 234, 234);zoom:1;background:#fff;border-radius:30px;margin:20px auto;padding:0 0 3px 3px;} 这样可以 #box li{margin:5px 5px 0 5px;} .first {position:relative;} #box li.first,#box li.first img{width:300px;height:300px;margin-right: 15px;border-radius:30px;box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.5);} >#box li,#box li img{position: relative;width: 150px;height: 150px;float: left} div{position:absolute;top:75px;left:75px;display:none;width:156px;height:156px;opacity:0.5;filter:alpha(opacity=50);background:#fff url(img/loading.gif) 50% 50% no-repeat;} js ---------- var oImg = document.getElementById("box").getElementsByTagName("img"); var oDiv = document.getElementsByTagName("div")[0]; for (var i = 1; i < oImg.length; i++) { oImg[i].index=i; oImg[i].onmouseover=function () { //console.log(oImg[this.index].src); //console.log(oImg[this.index].opacity); //oImg[this.index].style.opacity=1; var img=new Image(); img.src=oImg[0].src=this.src.replace(/small/, "big" ); //console.log(oImg[0].src); // to show the loading gif oDiv.style.display="block"; img.complete ? oDiv.style.display="none" : (oImg[0].onload=function () {oDiv.style.display="none" }) } }