摘自百度的图片切换特效代码

代码简介:

来自百度联盟的一款图片切换特效,每幅图片淡入淡出切换,美观大方,修改图片地址、链接地址,说明文字都很方便,代码中有详细注释,推荐使用。

代码内容:

View Code
<html>
<head>
<title>摘自百度的图片切换特效代码 - www.webdm.cn</title>
</head>
<body>
<script>
var links = new Array();
links[
1] = "/";
links[
2] = "/";
links[
3] = "/";
links[
4] = "/";
var imgs = new Array();
for(var n = 1; n <= 5; n++) imgs[n] = new Image();
imgs[
1].src = "http://www.webdm.cn/images/20091006/tongji550.gif";
imgs[
2].src = "http://www.webdm.cn/images/20091006/banner071031.jpg";
imgs[
3].src = "http://www.webdm.cn/images/20091006/dataunion0711.jpg";
imgs[
4].src = "http://www.webdm.cn/images/20091006/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;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>
</body>
</html>
<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!

</p>

代码来自:http://www.webdm.cn/webcode/fea9fb89-a960-4861-bad8-66f84244f6c8.html

原文地址:https://www.cnblogs.com/webdm/p/2308591.html