Rumah > hujung hadapan web > tutorial js > 摘自百度的图片轮换效果代码_图象特效

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

WBOY
Lepaskan: 2016-05-16 19:07:58
asal
1147 orang telah melayarinya

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

"; //修改点1:循环添加内层div内容以增加个数 str += "
1
2
3
4
"; str += "
" + 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 = "" + 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 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);
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan