页面导航：首页 → 网络编程 → JavaScript → 网页特效 → 图象特效 → 正文内容

摘自百度的图片轮换效果代码

发布：dxy 字体：[增加减小] 类型：转载

这是一个网页设计中经常会用到的图片特效，实现多个图片之间的轮换，并分别带有连接，以前的代码只能适用于IE，在FF下始终没有得到很好的解决，今天意外的在百度联盟首页上看到这样的效果，支持FF，收藏起来备用。

点击运行可以看到效果:

var imgwidth = 550;//图片宽度 
var imgheight = 134;//图片宽度

//修改点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 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>

[Ctrl+A 全选提示:你可先修改部分代码,再按运行]

Tags：摘自百度的图片轮换效果代码