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

最新推荐文章于 2019-07-21 23:44:31 发布

xuxinmin

最新推荐文章于 2019-07-21 23:44:31 发布

阅读量919

点赞数

分类专栏： web前端文章标签：浏览器 class function div float filter

本文链接：https://blog.csdn.net/xuxinmin/article/details/7908347

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

这个JS开发的焦点图效果，通过样式的调整，可以变成各种效果，而且而且兼容IE6，IE7，IE8，IE9，火狐浏览器等主流浏览器

效果图：更多预览效果

样式：

.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代码：

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>

<li>