<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝商品</title>
<link href="reset.css" rel="stylesheet">
<style>
.outs {
width: 307px;
height: 214px;
border: 1px solid #FF6300;
margin: 50px auto;
}
.ul1 {
float: left;
border-right: 1px solid #FFADAD;
border-left: 1px solid #FFADAD;
margin-left: 6px;
margin-top: 6px;
}
img {
float: left;
margin-left: 6px;
margin-top: 6px;
}
.ul2 {
float: right;
border-right: 1px solid #FFADAD;
border-left: 1px solid #FFADAD;
margin-right: 6px;
margin-top: 6px;
}
li {
width: 50px;
height: 27px;
line-height: 27px;
text-align: center;
border-bottom: 1px solid #FFADAD;
border-top: 1px solid #FFADAD;
}
li a {
color: black;
font-weight: bold;
}
.red {
background-color: red;
}
.white {
background-color: white;
}
</style>
<script>
window.onload = function () {
var pic = document.getElementById('pic');
var array = ['pic/1.png', 'pic/2.png', 'pic/3.png', 'pic/4.png', 'pic/5.png', 'pic/6.png', 'pic/7.png', 'pic/8.png', 'pic/9.png', 'pic/10.png', 'pic/11.png', 'pic/12.png', 'pic/13.png', 'pic/14.png'];
var index = 1;
setTimeout(function () {
setInterval(function () {
pic.src = array[index];
index++;
index = index % array.length;
}, 1000)
}, 1000)
var arr = ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14'];
var indexs = 0;
setInterval(function () {
if (indexs == 14) {
document.getElementById(arr[indexs - 1]).className = 'white';
}
indexs = indexs % arr.length;
var li = document.getElementById(arr[indexs]);
li.className = 'red';
if (indexs > 0) {
document.getElementById(arr[indexs - 1]).className = 'white';
}
indexs++;
}, 1000)
}
</script>
</head>
<body>
<div class="outs">
<ul class="ul1">
<li id="1"><a href="#">连衣裙</a></li>
<li id="2"><a href="#">雪纺</a></li>
<li id="3"><a href="#">T恤</a></li>
<li id="4"><a href="#">铅笔裤</a></li>
<li id="5"><a href="#"> 婚纱</a></li>
<li id="6"><a href="#">外套</a></li>
<li id="7"><a href="#">连体裤</a></li>
</ul>
<img src="pic/1.png" id="pic">
<ul class="ul2">
<li id="14"><a href="#"> 包包</a></li>
<li id="13"><a href="#">凉鞋</a></li>
<li id="12"><a href="#">单鞋</a></li>
<li id="11"><a href="#">太阳镜</a></li>
<li id="10"><a href="#">丝袜</a></li>
<li id="9"><a href="#"> 帆布鞋</a></li>
<li id="8"><a href="#">情侣装</a></li>
</ul>
</div>
</body>
</html>
网友评论