2018-02-14淘宝广告效果图
2018-02-14 本文已影响0人
朱禹诺
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="reset.css">
<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 image = document.getElementById('image');
var lis = document.getElementsByTagName('li');
lis[0].className='now';
var index = 1;
var count =13;
var timeid = setInterval(function run () {
if(index<7)
{
lis[7].className='';
if(index==0)
{
lis[index].className='now';
}
else
{
lis[index-1].className='';
lis[index].className='now';
}
image.src=arr[index];
index++;
if(index==7)
{
count=13;
}
}
else
{
lis[6].className='';
if(count==13)
{
lis[count].className='now';
}
else
{
lis[count+1].className='';
lis[count].className='now';
image.src=arr[count];
}
count--;
if(count==6)
{
index=0;
}
}
},500)
for(var i=0;i<arr.length;i++)
{
lis[i].index = i;
lis[i].onmouseover=function () {
clearInterval(timeid);
for(var j=0;j<arr.length;j++)
{
lis[j].className='';
}
lis[this.index].className='now';
image.src=arr[this.index];
}
lis[i].onmouseout=function () {
lis[this.index].className='';
timeid = setInterval(function run () {
if(index<7)
{
lis[7].className='';
if(index==0)
{
lis[index].className='now';
}
else
{
lis[index-1].className='';
lis[index].className='now';
}
image.src=arr[index];
index++;
if(index==7)
{
count=13;
}
}
else
{
lis[6].className='';
if(count==13)
{
lis[count].className='now';
}
else
{
lis[count+1].className='';
lis[count].className='now';
image.src=arr[count];
}
count--;
if(count==6)
{
index=0;
}
}
},1000)
}
}
}
</script>
<style>
.change{
width: 307px;
height: 212px;
border: 1px solid orangered;
margin-top: 52px;
margin-left: 531px;
}
li{
width: 51px;
height: 27px;
border: 1px solid plum;
text-align: center;
}
.left{
float: left;
margin-left: 6px;
margin-top: 5px;
}
.img{
float:left;
margin-left: 5px;
margin-top: 7px;
}
.right{
float: right;
margin-right: 6px;
margin-top: 5px;
}
a{
color: black;
}
.now{
background-color: palevioletred;
}
.now a{
color: white;
}
</style>
</head>
<body>
<div class="change">
<div>
<ul class="left">
<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>
</div>
<div class="img">
<img src="image/1.png" id="image">
</div>
<div>
<ul class="right">
<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>
</div>
</body>
</html>
