This is a picture special effect that is often used in web design. It realizes the rotation between multiple pictures and connects them respectively. The previous code can only be applied to IE. It has never been well solved under FF. Today I unexpectedly saw this effect on the Baidu Alliance homepage. It supports FF and is saved for later use.
]<script>
var links = new Array();
links[1] = "http://tongji.baidu.com";
links[2] = "http://hi.baidu.com/bdadd/blog/item/6f9f80b12e50cf57092302e3.html";
links[3] = "http://union.baidu.com/promo/dataunion/index.html";
links[4] = "http://www.umaz.cn";
var imgs = new Array();
for(var n = 1; n <= 5; n++) imgs[n] = new Image();
imgs[1].src = "/upload/20071119222354548.gif";
imgs[2].src = "/upload/20071119222354556.jpg";
imgs[3].src = "/upload/20071119222354919.jpg";
imgs[4].src = "/upload/20071119222354150.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 += "";
str += "<div style='position:relative'>";
str += "<div><a id='dlink' href='" + links[1] + "' target='_blank'><img id='dimg' src='" + imgs[1].src + "' border='0' style="max-width:90%" + imgwidth + "' height='"+imgheight+"' style='filter:Alpha(opacity=100)' onmouseover='Pause(true)' onmouseout='Pause(false)' alt="Excerpted from Baidu's image rotation effect code_image special effects" >";
//修改点1：循环添加内层div内容以增加个数
str += "<div id='imgnv'><div id='it1' class='on' onmouseover='ImgSwitch(1, true)' onmouseout='Pause(false)'>1<div id='it2' class='off' onmouseover='ImgSwitch(2, true)' onmouseout='Pause(false)'>2<div id='it3' class='on' onmouseover='ImgSwitch(3, true)' onmouseout='Pause(false)'>3<div id='it4' class='off' onmouseover='ImgSwitch(4, true)' onmouseout='Pause(false)'>4";
str += "<div id='titnv'><b>" + tits[1] + "";
str += "";
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] + "";
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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
