兼容浏览器美的JS焦点图效果适合各种图片切换效果

兼容浏览器美的JS焦点图效果适合各种图片切换效果 c_a_3(); 兼容浏览器好的JS焦点图效果，适合各种图片切换效果 这个JS开发的焦点图 效果，通过样式的调整，可以变成各种效果，而且而且兼容IE6，IE7，IE8，IE9，火狐浏览器 等主流浏览器 效果图:更多预览效果 样式: style type=”text/css” .banner{ border:1px solid #e5e5e5; margin-bottom:10px; padding:0;width:490px;height:250px;_height:258px;} img{border:0} .dis { DISPLAY: block } .undis { DISPLAY: none } #Focus { WIDTH: 490px; HEIGHT: 250px; _HEIGHT: 258px; } #FocusPic { WIDTH: 490; HEIGHT: 250px;_HEIGHT: 258px; position: absolute;z-index:10; } #Fpic {z-index:40;CLEAR: both; FILTER: progid:DXImageTransform.Microsoft.GradientWipe(duration=2,gradientSize=1,wipesty le=1,motion=forward); } #Ftxt { WIDTH: 489px; height:25px;position: absolute;float:left; background-color:#000; filter: alpha(opacity=70); -moz-opacity: 0.7; opacity: 0.7; left: 1px; top: 228px;_top: 237px; z-index:20; } #Ftxt UL { CLEAR: both;WIDTH: 350px; text-aglin:center;height:25px;list-style-type:none;margin:0; } #Ftxt UL h2{ font-size: 12px; font-weight:normal; color: #fff; line-height: 25px; text-align: center; height: 25px;width:335px; margin:0; } #Ftxt UL A { COLOR: #fff } #Ftxt UL h2 a{color:#fff;height:25px;text-decoration:none;} #Ftxt UL a:hover{color:#fff;text-decoration:underline;} #Ftxt .mya{ font-size:12px; text-indent:25px; margin-left:10px !important; margin-left:5px; line-height:16px; overflow:hidden; } #Fpic .ft { WIDTH: 110px; position: absolute; right: 0px; top: 226px;_top: 234px; z-index:30; } #Fpic .ft .newmore { FLOAT: left; WIDTH: 100px; height:20px; } #Fpic #Fnums { FLOAT: right; WIDTH: 106px; margin-top:5px; } #Fpic #Fnums DIV { FONT-WEIGHT: bold; background:url(../images/images/focus_ico.png) -21px 0 no-repeat; FLOAT: left; WIDTH: 18px; CURSOR: pointer; COLOR: #666; LINE-HEIGHT: 18px; MARGIN-RIGHT: 3px; HEIGHT: 19px; TEXT-ALIGN: center } #Fpic #Fnums .on { background:url(../images/images/focus_ico.png) no-repeat; color:#FFF; text-decoration:none; } /style JS代码: script type=”text/javascript” var n = 0; var showsTab = document.getElementById(“Fnums”); var m = showsTab.getElementsByTagName(“div”).length; function Mea(value) { n = value; setBg(value); plays(value); cons(value); } function setBg(value) { for (var i = 0; i m; i++) if (value == i) { showsTab.getElementsByTagName(“div”)[i].className = ‘on’; } else { showsTab.getElementsByTagName(“div”)[i].className = ”; } } function plays(value) { try { with (Fpic) { filters[0].Apply(); for (i = 0; i m; i++) i == value ? children[i].className = “dis” : children[i].className = “undis”; filters[0].play(); } } catch (e) { var d = document.getElementById(“Fpic”).getElementsByTagName(“div”); for (i = 0; i m; i++) i == value ? d[i].className = “dis” : d[i].className = “undis”; } } function cons(value) { try { with (Ftxtlingks) { for (i = 0; i m; i++) i == value ? children[i].className = “dis” : children[i].className = “undis”; } } catch (e) { var d = document.getElementById(“Ftxtlingks”).getElementsByTagName(“ul”); for (i = 0; i m; i++) i == value ? d[i].className = “dis” : d[i].className = “undis”; } } function clearAuto() { clearInterval(autoStart) } function setAuto() { autoStart = setInterval(“auto(n)”, 3000) } function auto() { n++; if (n = m) n = 0; Mea(n); } function sub() { n–; if (n 0) n = m – 1; Mea(n); } setAuto(); function tab(o, o2, n, o1c, o2c) { var m_n = document.getElementById(o).getElementsByTagName(o1c); var c_n = document.getElementById(o2).getElementsByTagName(o2c); for (i = 0; i m_n.length; i++) { m_n[i].className = i == n ? “on” : “”; c_n[i].className = i == n ? “dis” : “undis”; } } /script HMTL代码: div class=”banner” div class=”focus” div id=”Focus” div id=”FocusPic” onmouseover=”clearAuto()” onmouseout=”setAuto()” div id=”Fpic” div class=”dis” a href=”” target=”_blank” title=”思维酷-IT专业博客” img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=” /a /div div class=”undis” a href=”” target=”_blank” title=”思维酷-IT专业博客” img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=” /a /div div class=”undis” a href=”” target=”_blank” title=”思维酷-IT专业博客” img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=” /a /div div class=”undis” a href=”” target=”_blank” title=”思维酷-IT专业博客” img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=” /a /div div class=”undis” a href=”” target=”_blank” title=”思维酷-IT专业博客” img style=”width:490px; height:250px;_height:258px;” alt=”思维酷-IT专业博客” src=” /a /div div class=”ft” div id=”Fnums” div class=”on” onmouseover=”Mea(0)” 1 /div div onmouseover=”Mea(1)” 2 /div div onmouseover=”Mea(2)” 3 /div div onmouseover=”Mea(3)” 4 /div div onmouseover=”Mea(4)” 5 /div /div /div div id=”Ftxt” div id=”Ftxtlingks” ul class=”dis” li h2 a href=”” target=”_blank” 思维酷-IT专业博客 作者:口明明口 /a /h2 /li /ul ul class=”undis” li h2 a href=”” target=”_blank” 思维酷-IT专业博客 作者:口明明口 /a /h2 /li /ul ul class=”undis” li h2 a href=”” target=”_blank” 思维酷-IT专业博客 作者:口明明口 /a /h2 /li /ul ul class=”undis” li h2 a href=”” target=”_blank” 思维酷-IT专业博客 作者:口明明口 /a /h2 /li /ul ul class=”undis” li h2 a href=”” target=”_blank” 思维酷-IT专业博客 作者:口明明口 /a /h2 /li /ul /div /div /div /div /div /div