摘自百度的图片切换特效代码
2011-12-31 11:52
477 查看
代码简介:
来自百度联盟的一款图片切换特效,每幅图片淡入淡出切换,美观大方,修改图片地址、链接地址,说明文字都很方便,代码中有详细注释,推荐使用。
代码内容:
View Code
代码来自:http://www.webdm.cn/webcode/fea9fb89-a960-4861-bad8-66f84244f6c8.html
来自百度联盟的一款图片切换特效,每幅图片淡入淡出切换,美观大方,修改图片地址、链接地址,说明文字都很方便,代码中有详细注释,推荐使用。
代码内容:
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 = 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;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> </body> </html> <br /> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码! </p>
代码来自:http://www.webdm.cn/webcode/fea9fb89-a960-4861-bad8-66f84244f6c8.html
相关文章推荐
- 图文列表和图片列表JS切换特效代码
- 摘自百度的图片轮换效果代码
- 摘自搜狐女人频道的图片切换的JS代码
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- 模仿土豆网首页图片切换特效的代码
- 摘自百度的图片轮换效果代码
- (js特效) js代码实现图片切换
- 土豆网首页图片切换特效代码
- 网页特效代码-新闻图片切换特效
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- jquery图片倾斜层叠切换特效代码分享
- picChange 图片切换特效的函数代码
- jquery焦点图片左右滑动切换特效代码
- 网页前端代码存档 - 【第三期】全屏banner图片切换特效详解
- js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
- 各大门户网站Flash和JS实现的图片幻灯片切换特效代码文件下载
- 【荐】来自人民网的JS+Flash多图预览的图片切换特效_网页代码站(www.webdm.cn)
- 基于jQuery实现仿百度首页换肤背景图片切换代码
- 摘自人民网体育频道的JS卷角翻转方块图片切换_网页代码站(www.webdm.cn)
- jQuery旋转木马仿3D效果的图片切换特效代码