兼容浏览器好的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,wipestyle=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()