标签：style blog color io os ar for sp div
<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>
标签：style blog color io os ar for sp div
原文地址：http://www.cnblogs.com/jellybaobao/p/4018029.html
