<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝网</title>
<style>
html, body, ul {
margin: 0;
padding: 0;
}
img {
border: 0;
float: left;
margin: 0 5px;
}
li {
list-style: none;
border: 1px solid #FFADAD;
width: 40px;
padding: 5px;
text-align: center;
font-size: 12px;
}
a {
text-decoration: none;
display: block;
color: #000;
}
#wrap {
border: 1px solid #FF6300;
padding: 5px;
overflow: hidden;
width: 294px;
margin: 50px auto;
}
#left {
float: left;
}
#right {
float: left;
right: 0;
top: 0;
}
.red
{
background-color:red ;
}
.white
{
background-color:white ;
}
</style>
<script>
window.onload = function () {
var arr = ['image/1.png','image/2.png','image/3.png', 'image/4.png','image/5.png','image/6.png', 'image/7.png','image/8.png','image/9.png', 'image/10.png','image/11.png','image/12.png', 'image/13.png','image/14.png',];
var img = document.getElementById('img');
var index = 0;
var li = document.getElementsByTagName('li');
var inde = 0;
//定时器
var timeid = setInterval(function () {
img.src = arr[index];
index++;
index = index % arr.length;
for(var i = 0;i < li.length;i++)
{
li[i].className = 'white';
}
li[inde].className = 'red';
inde++;
inde = inde % li.length;
},1000);
//关闭定时器
for(var i = 0;i < arr.length;i++)
{
li[i].onmouseover = function () {
clearInterval(timeid);
}
}
}
</script>
</head>
<body>
<div id="wrap">
<ul id="left">
<li class = "red" id = "a"><a href="#">连衣裙</a></li>
<li class = "white" id = "b"><a href="#">雪纺</a></li>
<li id = "c"><a href="#">T恤</a></li>
<li id = "d"><a href="#">铅笔裤</a></li>
<li id = "e"><a href="#">婚纱</a></li>
<li id = "f"><a href="#">外套</a></li>
<li id = "g"><a href="#">连体裤</a></li>
</ul>
<img src="image/1.png" id = "img" />
<ul id="right">
<li id = "h"><a href="#">包包</a></li>
<li id = "i"><a href="#">凉鞋</a></li>
<li id = "j"><a href="#">单鞋</a></li>
<li id = "k"><a href="#">太阳镜</a></li>
<li id = "l"><a href="#">丝袜</a></li>
<li id = "m"><a href="#">帆布鞋</a></li>
<li id = "n"><a href="#">情侣装</a></li>
</ul>
</div>
</body>
</html>
淘宝商品广告效果图
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
