<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{
padding:0px;
margin:0px;
}
#wrap{
border:1px #FF3366 solid;
padding:5px;
overflow:hidden;
415px;
margin:50px auto;
}
#left{
float:left;
}
#right{
float:right;
}
li{
list-style-type:none;
border:1px #FF6699 solid;
40px;
text-align:center;
font-size:12px;
padding:5px;
}
img{
float:left;
margin:0px 5px;
height:190px;
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>