讨论网站建设与网页设计相关内容。进入论坛！

您现在的位置：首页 > 全部教程 > Javascript >

使用软件：阅读次数：收录时间：2008-05-09

兼容IE与FF的图片切换特效

作者：百度联盟来源：网页教学网

这段代码轮翻渐隐显示多张图片,可以为每张图片加上不同的链接,优点在于兼容IE和FF浏览器,代码写得十分工整,建议初学JS的用户研究下,百度联盟首页的特效!

<script>
var links = new Array();
links[1] = "http://www.websbook.net";
links[2] = "http://www.websbook.net";
links[3] = "http://www.websbook.net";
links[4] = "http://www.websbook.net";
var imgs = new Array();
for(var n = 1; n <= 5; n++) imgs[n] = new Image();
imgs[1].src = "http://union.baidu.com/img/tongji550.gif";
imgs[2].src = "http://union.baidu.com/img/banner071031.jpg";
imgs[3].src = "http://union.baidu.com/img/dataunion0711.jpg";
imgs[4].src = "http://union.baidu.com/img/umaz13_550.jpg";
var tits = new Array();
tits[1] ="百度统计";
tits[2] = "联盟杯摄影师大赛";
tits[3] = "百度行业报告";
tits[4] = "联盟志";
var imgwidth = 550;//图片宽度
var imgheight = 134;//图片宽度
var str = "<style type='text/css'>";
str += "#imgnv{display:none;position:absolute;bottom:-1px;right:0;height:16px;}#imgnv div{float:left;margin-right:1px;}";
str += "#imgnv div.on,#imgnv div.off{margin-bottom:1px;width:30px;height:15px;line-height:18px!important;line-height:15px;font-size:9px;text-align:center;cursor:pointer;cursor:hand}";
str += "#imgnv div.on{background:#CE0609;color:#FFF;font-weight:bold}";
str += "#imgnv div.off{background:#323232;color:#FFF;text-decoration:none}";
str += "#titnv{margin-top:3px;color:#000;text-align:center;display:none;}";
str += "</style>";
str += "<div style='position:relative'>";
str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' width='" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)'></a></div>";
//修改点1：循环添加内层div内容以增加个数
str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1</div><div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2</div><div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3</div><div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4</div></div>";
str += "<div id='titnv'><b>" + tits[1] + "</b></div>";
str += "</div>";
document.write(str);
var oi = document.getElementById("dimg");
var pause = false;
var curid = 1;
var lastid = 1;
var sw = 1;
var opacity = 100;
var speed = 15;
var delay = (document.all)? 400:700;
function SetAlpha(){
if(document.all){
if(oi.filters && oi.filters.Alpha) oi.filters.Alpha.opacity = opacity;
}else{
oi.style.MozOpacity = ((opacity >= 100)? 99:opacity) / 100;
}
}
function ImgSwitch(id, p){
if(p){
pause = true;
opacity = 100;
SetAlpha();
}
oi.src = imgs[id].src;
document.getElementById("dlink").href = links[id];
document.getElementById("it" + lastid).className = "off";
document.getElementById("it" + id).className = "on";
document.getElementById("titnv").innerHTML = "<b>" + tits[id] + "</b>";
curid = lastid = id;
}
function ScrollImg(){
if(pause && opacity >= 100) return;
if(sw == 0){
opacity += 2;
if(opacity > delay){ opacity = 100; sw = 1; }
}
if(sw == 1){
opacity -= 3;
if(opacity < 10){ opacity = 10; sw = 3; }
}
SetAlpha();
if(sw != 3) return;
sw = 0;
curid++;
//修改点2：这里的4也是个数
if(curid > 4) curid = 1;
ImgSwitch(curid, false);
}
function Pause(s){
pause = s;
}
function StartScroll(){
setInterval(ScrollImg, speed);
}
function CheckLoad(){
if (imgs[1].complete == true && imgs[2].complete == true) {
clearInterval(checkid);
setTimeout(StartScroll, 2000);
}
}
var checkid = setInterval(CheckLoad, 10);
</script>

提示：您可以先修改部分代码再运行

论坛讨论:

http://bbs.websbook.com/viewthread.php?tid=1510&extra=page%3D1

教程导航

JS/AJAX热门教程

禁止用右键查看源代码

做网页的朋友都会遇到这种情况：有时自己辛苦半天做的网页，尤其是一些JavaScript特效，很容易被人利用查看源文件而复制。那么如何才能防止被人查看源代码呢？我...

作者：

图片轮流上下显示的JS效果

由XHTML+CSS+JS实现的模拟flash的图片轮翻滚动代码,可以设置滚动时间间隔以及为每张图片增加不同的链接与说明文字,出处为网页教学网 htmlheadtitle网页设计手册...

作者：闪电儿

Javascript教程:使用javascript动

提供两方法: 一种是直接用按钮来加入新的CSS link id=m rel=stylesheet href=docEdit.css type=text/css input onclick=document.all.m.href='http://lucky.myri...

作者：websbook.com整理

AJAX开发简略

目录：一、AJAX定义二、现状与需要解决的问题三、为什么使用AJAX 四、谁在使用AJAX 五、用AJAX改进你的设计例子1：数据校验例子2：按需取数据级联菜单例子...

作者：eamoi

8种JavaScript特殊效果的实现

1．不同时间段显示不同问候语 2．水中倒影效果 3．慢慢变大的窗口 4．改变IE地址栏的IE图标 5．让网页随意后退6．鼠标指向时弹出信息框7．单击鼠标右键弹出...

作者：