易网时代-编程资源站

首页 / 脚本样式 / JavaScript / 摘自百度的图片轮换效果代码

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

<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 += "</style>"; str += ""; str += "<img id="dimg" src="" + imgs[1].src + "" border="0" width="" + imgwidth + "" height=""+imgheight+"" style="filter:Alpha（opacity=100）" onmouseover="Pause（true）" onmouseout="Pause（false）">"; //修改点1：循环添加内层div内容以增加个数 str += "1234"; str += "<b>" + tits[1] + "</b>"; 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] + "</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>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

版权所有©石家庄振强科技有限公司2024 冀ICP备08103738号-5 网站地图