html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>爱奇艺导航</title>
<link rel="stylesheet" type="text/css" href="imgchange.css">
</head>
<body>
<div id="box">
<div id="imgBackground">
<ul>
<li><a href="#"><img src="s1.jpg" alt="1.jpg"></a> </li>
<li><a href="#"><img src="s4.jpg" alt="2.jpg"></a> </li>
<li><a href="#"><img src="s1.jpg" alt="3.jpg"></a> </li>
<li><a href="#"><img src="s4.jpg" alt="4.jpg"></a> </li>
<li><a href="#"><img src="s1.jpg" alt="5.jpg"></a> </li>
</ul>
</div>
<div id="description">
<ul>
<li><a href="#">One</a> </li>
<li><a href="#">Two</a> </li>
<li><a href="#">Three</a> </li>
<li><a href="#">Four</a> </li>
<li><a href="#">Five</a> </li>
</ul>
</div>
</div>
<script src="imgchange.js"></script>
</body>
</html>
css
*{
margin: 0;
padding: 0;
}
ul{
list-style: none;
font-size: 0;
}
#box{
position: relative;
height: 400px;
overflow: hidden;
}
#description{
position: absolute;
width: 300px;
height: 400px;
left: 1100px;
top: 0px;
background-color: rgba(0,0,0,0.7);
}
img{
width: 1300px;
height: 400px;
}
#imgBackground{
width: 1300px;
position: relative;
margin-left: auto;
margin-right: auto;
}
#description a{
text-decoration: none;
color: white;
font-size: 15px;
display: block;
line-height: 80px;
}
#description li{
text-align: center;
height: 80px;
}
javascript
addLoadEvent(aHover);
addLoadEvent(move(0));
var timec=null;
function addLoadEvent(func) {
var oldonload=window.onload;
if(typeof window.onload!="function")
{
window.onload=func;
}
else{
window.onload=function () {
oldonload();
func();
}
}
}
function aHover() {
var description=document.getElementById("description");
var alist=description.getElementsByTagName("a");
alist[0].style.color="green";
alist[0].onmouseover=function (ev) {
move(0);
};
alist[1].onmouseover=function (ev) {
move(1);
};
alist[2].onmouseover=function (ev) {
move(2);
};
alist[3].onmouseover=function (ev) {
move(3);
};
alist[4].onmouseover=function (ev) {
move(4);
};
}
function play() {
autoMove(0);
}
function autoMove(s) {
var elem=document.getElementById("imgBackground");
var description=document.getElementById("description");
var alist=description.getElementsByTagName("a");
var s=elem.style.top;
var i=s/400;
alist[i].style.color="green";
elem.style.top=(-i)*400+"px";
var timec=setTimeout(function () {
autoMove(i+1);
},3000);
}
function move(i) {
var elem=document.getElementById("imgBackground");
var description=document.getElementById("description");
var alist=description.getElementsByTagName("a");
if(timec)
{
clearTimeout(timec);
}
for(var j=0;j<alist.length;j++)
{
if(i==j)
{
alist[i].style.color="green";
}
else
{
alist[j].style.color="white";
}
}
elem.style.top=(-i)*400+"px";
timec=setTimeout(function () {
if((i)<4)
{
move(i+1);
}
else {
move(0);
}
},3000);
}