<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
#nav_1{
height: 80px;
background-color: transparent;;
position: relative;
top: -100px;
left: 10px;
width: 1400px;
}
#ul_1{
margin-left: 955px;
}
#ul_1 li{
list-style: none;
float: left;
width: 80px;
background-color: blueviolet;
margin-left: 1px;
height: 80px;
}
#ul_1 li a{
line-height: 80px;
font-family: inherit;
font-size: 50px;
padding-left: 40px;
}
</style>
<body>
<script>
var imgs=["img/1.png","img/2.png","img/3.png","img/4.png","img/5.png",];
var num=["1","2","3","4","5"];
var index=0;
var time=0;
function change(){
index++;
document.getElementById("li"+(index-1)).style.backgroundColor="blueviolet";
if(index>4 ){
index=0;
}
document.getElementById("li"+(index)).style.backgroundColor="rgba(100,0,0,255)";
document.getElementById("img_1").src=imgs[index];
time=setTimeout(change,2000);
}
change();
document.getElementById("img_1").οnmοuseοver= function () {
clearTimeout(time);
}
document.getElementById("img_1").οnmοuseοut= function () {
time=setTimeout(change,2000);
}
var ops="";
for(var i=0;i<num.length;i++){
ops=ops+"<li id='li"+i+"' οnmοuseοver='gaibian(this)' οnmοuseοut='back(this)' value='"+i+"'>"+"<a >"+num[i]+"</a>"+"</li>"
}
document.getElementById("ul_1").innerHTML=ops;
function gaibian(obj){
clearTimeout(time);
document.getElementById("img_1").src=imgs[obj.value];
}
function back(obj){
time=setTimeout(change,2000);
}
</script>
<div>
<img id="img_1" src="img/1.png">
</div>
<div class="div_1">
<nav id="nav_1">
<ul id="ul_1">
<li id="li0"></li>
<li id="li1"></li>
<li id="li2"></li>
<li id="li3"></li>
<li id="li4"></li>
</ul>
</nav>
</div>
</body></html>