<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="tea_reset.css">
<style>
.show{
margin: 50px auto 0;
border: 1px solid #FF6300;
width: 304px;
height: 206px;
}
.show ul{
display: inline-block;
margin: 5px;
}
.show li{
border: 1px solid #FFADAD;
padding: 5px;
width: 40px;
height: 16px;
line-height: 16px;
text-align: center;
}
.show li.active{
background-color: #FF4A6B;
color: white;
}
.show li a{
display: block;
color: inherit;
text-decoration: none;
}
.show img{
vertical-align: top;
margin: 5px -4px 0;
}
</style>
<script>
window.onload = function () {
var oImg = document.getElementsByTagName('img');
var oLis = document.getElementsByTagName('li');
for (var i = 0; i < oLis.length; i++){
oLis[i].index = i;
}
var activeIndex = 0;//记录当前定时显示的商品序号
var autoChange = function () {
for(var i of oLis){
i.className = '';
}
if(activeIndex < 7){
var newIndex = activeIndex;
}else {
var newIndex = 20 - activeIndex;//为了实现 U 型的播放顺序
}
oLis[newIndex].className = 'active';
oImg[0].src = `${newIndex + 1}.png`;
activeIndex++;
activeIndex %= oLis.length;//实现循环播放
}
var timerID = setInterval(autoChange,1000);
for(var i of oLis){
i.onmouseover = function () {
clearInterval(timerID);
for(var i of oLis){
i.className = '';
}
this.className = 'active';
oImg[0].src = `${this.index + 1}.png`;
}
i.onmouseout = function () {
for(var i of oLis){
i.className = '';
}
timerID = setInterval(autoChange,1000);
}
}
}
</script>
</head>
<body>
<div class="show">
<ul>
<li><a href="#">连衣裙</a></li>
<li><a href="#">雪纺</a></li>
<li><a href="#">T恤</a></li>
<li><a href="#">铅笔裤</a></li>
<li><a href="#">婚纱</a></li>
<li><a href="#">外套</a></li>
<li><a href="#">连体裤</a></li>
</ul>
<img src="1.png">
<ul>
<li><a href="#">包包</a></li>
<li><a href="#">凉鞋</a></li>
<li><a href="#">单鞋</a></li>
<li><a href="#">太阳镜</a></li>
<li><a href="#">丝袜</a></li>
<li><a href="#">帆布鞋</a></li>
<li><a href="#">情侣装</a></li>
</ul>
</div>
</body>
</html>
网友评论