焦点图循环切换效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>焦点图循环切换效果</title> <style type="text/css"> body{margin:0;padding:0;background-color:#FFF;} form,input,select,div,ul,li,p,h1,h2,h3,h4,h5,h6{margin:0px;padding:0px;} body,td,select,input,div{font-size:12px; color:#333;} img{border:none;} ul,li{list-style:none;} h1,h2{font-weight:normal;} a{text-decoration: none; color:#333;} a:hover{text-decoration:underline; color:#ff0000;} /*焦点图*/ #focuspic {width:345px; height:250px;} #focuspic #focus{width:345px; height:250px; position: relative;} #focuspic #au{FILTER:progid:DXImagetransform.Microsoft.Fade (duration=0.5,overlap=1.0); width:345px; height:250px;} #focuspic #no {margin-top: 0px; left:0px; width:345px; position: absolute; top:219px; text-align:center; line-height:31px; height:31px; background:#000;filter:alpha(Opacity=60);-moz-opacity: 0.6;} #focuspic #conau {margin-top:6px; left:14px; width:276px; position:absolute; top:222px; text-align:left;color:#fff;font-size:14px; font-weight:bold;} #focuspic #conau a{color:#fff;} #focuspic #conau a:hover{color:#fff;} #focuspic .lunbo{width:90px; height:14px; position: absolute;top:227px; left:256px;} #focuspic .lunbo ul{height:17px; float:right;} #focuspic .lunbo li{line-height:12px;font-weight:bold; float:left; margin-right:3px;} #focuspic .lunbo .bg,#focuspic .lunbo .active{width:14px;height:12px;text-align:center;line-height:12px;padding-top:2px;} #focuspic .lunbo .bg{background:#000;color:#b1b1b1;} #focuspic .lunbo .active{background:#e36500;color:#fefefe;} </style> </head> <body> <div id="focuspic"> <div id="focus"> <div id="au"> <div style="display:block;"><a href="#"><img height="250" src="http://img1.gtimg.com/baby/pics/30211/30211808.jpg" width="345" /></a></div> <div style="display:none;"><a href="#"><img height="250" src="http://img1.gtimg.com/baby/pics/30213/30213540.jpg" width="345" /></a></div> <div style="display:none;"><a href="#"><img height="250" src="http://img1.gtimg.com/baby/pics/30211/30211257.jpg" width="345" /></a></div> </div> <div id="no"></div> <div class="lunbo"> <ul> <li class="active" id="t0" onmouseover="Mea(0);clearAuto();" onmouseout="setAuto();">1 </li> <li class="bg" id="t1" onmouseover="Mea(1);clearAuto();" onmouseout="setAuto();">2 </li> <li class="bg" id="t2" onmouseover="Mea(2);clearAuto();" onmouseout="setAuto();">3 </li> </ul> </div> <div id="conau"> <div style="display:block;"><a href="#">春天宝宝这样吃可防身体缺钙</a></div> <div style="display:none;"><a href="#">原配自述：小三最终没成功</a></div> <div style="display:none;"><a href="#">专家：高龄孕妈咪全孕期指导</a></div> </div> <script type=text/javascript> var n=0; function Mea(value){ n=value; setBg(value); plays(value); conaus(n); } function setBg(value){ for(var i=0;i<3;i++) document.getElementById("t"+i+"").className="bg"; document.getElementById("t"+value+"").className="active"; } function plays(value){ try { with (au){ filters[0].Apply(); for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; filters[0].play(); } } catch(e) { var d = document.getElementById("au").getElementsByTagName("div"); for(i=0;i<3;i++)i==value?d[i].style.display="block":d[i].style.display="none"; } } function conaus(value){ try { with (conau){ for(i=0;i<3;i++)i==value?children[i].style.display="block":children[i].style.display="none"; } } catch(e) { var d = document.getElementById("conau").getElementsByTagName("div"); for(i=0;i<3;i++)i==value?d[i].style.display="block":d[i].style.display="none"; } } function clearAuto(){clearInterval(autoStart)} function setAuto(){autoStart=setInterval("auto(n)", 4000)} function auto(){ n++; if(n>2)n=0; Mea(n); conaus(n); } setAuto(); </script> </div> </div> </body> </html>
提示：你可以先修改部分代码再运行。