<html>
<head>
<style>
dl{width:400px;height:250px;}
dt{position:absolute}
dd{position:relative;left:125px;top:220px;margin:0px;padding:0px;width:150px;}
dt img{width:400px;height:250px;display:block;}
ul,li{list-style:none;margin:0px;padding:0px;}
li,.li_on,.li_off{width:10px;height:10px;display:inline-block;margin:5px;}
.li_on{background:red;}
.li_off{background:#ccc;}}
.img_on{opacity:1;filter:alpha(opacity=1);}
.img_off{opacity:0;filter:alpha(opacity=0);}
</style>
</head>
<body>
<dl>
<dt><img src="img/map.jpg" class="img_on"/></dt>
<dt><img src="img/bg_start.png" class="img_off"/></dt>
<dt><img src="img/init2.png" class="img_off"/></dt>
<dt><img src="img/btn_info.png" class="img_off"/></dt>
<dt><img src="img/btn_normal.png" class="img_off"/></dt>
<dd>
<ul><li class="li_on"></li>
<li class="li_off"></li>
<li class="li_off"></li>
<li class="li_off"></li>
<li class="li_off"></li></ul>
</dd>
</dl>
<script>
window.onload=function(){
var current=document.getElementsByTagName("li");
for(var i=0;i<current.length;i++){
current[i].addEventListener("click",function(){toPic(this)},false )
}
}
function toNext(){
var current=document.getElementsByTagName("li");
var pics=document.getElementsByTagName("img");
for(var i=0;i<current.length;i++){
if(current[i].className=="li_on"){
current[i].className="li_off";
var num=(i+1)%5;
current[num].className="li_on";
pics[num].className="img_on";
pics[i].className="img_off";
break;
}
}
iflag=setTimeout(toNext,2000);
}
toNext();
function toPic(obj){
clearTimeout(iflag)
console.log(obj);
console.log(obj.className);
var current=document.getElementsByTagName("li");
var pics=document.getElementsByTagName("img");
for(var i=0;i<current.length;i++){
if(current[i].className=="li_on"){
current[i].className="li_off";
pics[i].className="img_off";
break;
}
}
for(var i=0;i<current.length;i++){
if(current[i]==obj){
obj.className="li_on";
pics[i].className="img_on";
}
}
setTimeout(toNext,2000);
}
</script>
</body>
</html>
