<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>*{ padding:0px; margin:0px; }#wrap{ border:1px #FF3366 solid; padding:5px; overflow:hidden; width:415px; margin:50px auto; }#left{ float:left; }#right{ float:right; }li{ list-style-type:none; border:1px #FF6699 solid; width:40px; text-align:center; font-size:12px; padding:5px; }img{ float:left; margin:0px 5px; height:190px; width:300px; } </style><script type="text/javascript">window.onload = function (){ var arrimg = [‘img/5-1.jpg‘,‘img/5-2.jpg‘,‘img/5-3.jpg‘,‘img/5-4.jpg‘,‘img/5-5.jpg‘,‘img/5-6.jpg‘,‘img/5-7.jpg‘,‘img/5-8.jpg‘,‘img/5-9.jpg‘,‘img/5-10.jpg‘,‘img/5-11.jpg‘,‘img/5-12.jpg‘,‘img/5-13.jpg‘,‘img/5-14.jpg‘]; var odiv = document.getElementById(‘wrap‘); var oli = odiv.getElementsByTagName(‘li‘); var oimg = odiv.getElementsByTagName(‘img‘)[0]; var timer = null; var num = 0; function clear() { for ( var i = 0; i < oli.length; i++) { oli[i].style.background = ‘#fff‘; oli[i].style.color = ‘#000‘; } } function play() { clear(); oli[num].style.background = ‘#FF4A6B‘; oli[num].style.color = ‘#fff‘; oimg.src = arrimg[num]; if( num < oli.length/2) { num++; if( num == oli.length/2) num = oli.length - 1; } else num--; if( num == oli.length/2 - 1 ) { num = 0; } } timer = setInterval(play,1000); for( var i = 0; i < oli.length; i++ ) { oli[i].index = i; oli[i].onmouseover = function () { clear(); clearInterval(timer); this.style.background = ‘#FF4A6B‘; this.style.color = ‘#fff‘; oimg.src = arrimg[this.index]; }; oli[i].onmouseout = function () { this.style.background = ‘#fff‘; this.style.color = ‘#000‘; timer = setInterval(play,1000); } } };</script></head>
<body><div id="wrap"> <ul id="left"> <li>连衣裙</li> <li>雪纺</li> <li>t恤</li> <li>铅笔裤</li> <li>婚纱</li> <li>外套</li> <li>连体裤</li> </ul> <img src="img/loading.gif"> <ul id="right"> <li>包包</li> <li>凉鞋</li> <li>单鞋</li> <li>太阳镜</li> <li>丝袜</li> <li>帆布鞋</li> <li>情侣装</li> </ul></div></body></html>
时间： 2024-11-08 19:49:15