当前位置：首页 → 问答吧 → 请大家帮忙看看这个JS轮转图效果

请大家帮忙看看这个JS轮转图效果

时间：2010-05-17

来源：互联网

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS仿2010世博会主页焦点flash V2.1</title> <style type="text/css"> *{margin:0;padding:0;border:0;list-style:none;} body{padding:20px;background:#eee;} #myFocus{width:960px;height:296px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}/*焦点图大小，可按需要是否加边框*/ #myFocus .loading{position:absolute;z-index:9999;width:860px;height:296px;background:#fff url(http://nethd.zhongsou.com/wtimg/i_158290/15250-loading.gif) center -40px no-repeat;color:#666;font-size:12px;text-align:center;padding-top:90px;}/*载入画面*/ #myFocus .pics li{position:absolute;top:0px;left:0px;} #myFocus .pics li img{filter:alpha(opacity=0);opacity:0;width:850px;height:296px;}/*图片大小*/ #myFocus .btn .left{position:absolute;z-index:3;top:88px;left:5px;font-size:12px;}/*按钮样式*/ #myFocus .btn .right{position:absolute;z-index:3;top:88px;right:5px;font-size:12px;}/*按钮样式*/ </style> <script type="text/javascript"> /*design by koen @ 10nian5yue8ri*/ /*http://hi.baidu.com/koen_li*/ function setMyFocus(ID,t){//主函数... function $(id) {return document.getElementById(id);} function $$(tag,obj){return (typeof obj=='object'?obj:$(obj)).getElementsByTagName(tag);} function opa(n){//图片淡入淡出函数 var pics = $$('img',pic); var setfade=function(obj,o){ if (document.all) obj.style.filter = "alpha(opacity=" + o + ")"; else obj.style.opacity = (o / 100); }; var getfade=function(obj){ return (document.all)?((obj.filters.alpha.opacity)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false); } var show=function(){ if(pics[n].move) clearTimeout(pics[n].move); if (o1 >= 100) return true; o1+=1; setfade(pics[n],o1); pics[n].move=setTimeout(show,1); }; var hide=function(){ if(pics[N].move) clearTimeout(pics[N].move); if (o2 <= 0) {pics[N].style.display='none';return true;} o2-=1; setfade(pics[N],o2); pics[N].move=setTimeout(hide,1); }; for(var i=0;i<pics.length;i++){ if(!getfade(pics[i])) {setfade(pics[i],0);pics[i].style.display='none';} if(pics[i].name=='out') var N=i; } if(!N&&n==0) {//开始载入... pics[n].name='out'; pics[n].style.display=''; var o1=getfade(pics[n]); show(); return true; } if(N==n) return true; pics[N].name='' pics[n].name='out'; pics[n].style.display=''; var o1=getfade(pics[n]); var o2=getfade(pics[N]); hide(); show(); } function autoFocusChange() {//自动运行 if (atuokey) return; var pics = $$('img',pic); for (var i = 0; i <pics.length; i++) { if (pics[i].style.display != 'none') var currentNum = i; } if(currentNum<pics.length-1){ opa(currentNum+1); }else if(currentNum==pics.length-1){ opa(0); } } function focusChange(){//交互切换 $('right').onclick= function(){ var pics = $$('img',pic); for (var i = 0; i <pics.length; i++) { if (pics[i].style.display != 'none') var currentNum = i; } if(currentNum<pics.length-1){ opa(currentNum+1); }else if(currentNum==pics.length-1){ opa(0); } } $('left').onclick= function(){ var pics = $$('img',pic); for (var i = 0; i <pics.length; i++) { if (pics[i].style.display != 'none') var currentNum = i; } if(currentNum==0){ opa(pics.length-1); }else{ opa(currentNum-1); } } } function init(){//初始化 $(ID).removeChild($$('div',ID)[2]); opa(0); $(ID).onmouseover = function() { atuokey = true; clearInterval(auto); } $(ID).onmouseout = function() { atuokey = false; auto=setInterval(autoFocusChange, T); } } var ul=$$('ul',ID)[0]; var li=$$('li',ul); var NUM=li.length; var s1='<div class="tsBg"></div><div class="btnBg"><ul>';for(var i=0;i<NUM;i++){s1+='<li></li>'};s1+='</ul></div>'; var s2='<div class="ts"><ul>'; for(var i=0;i<NUM;i++){var a=$$('a',li[i])[0];var img=$$('img',li[i])[0];s2+='<li><a href="'+a.href+'">'+img.alt+'</a></li>'};s2+='</ul></div>'; $(ID).innerHTML=s1+$(ID).innerHTML+s2; //生成HTML结束 var pic=$$('div',ID)[3]; var atuokey = ''; var auto=''; var T=t*1000;//每帧图片停留的时间，1000=1秒 init(); focusChange(); auto=setInterval(autoFocusChange, T); } window.onload=function(){ setMyFocus('myFocus',3) } </script> </head> <body> <div id="myFocus"> <div class="loading">请稍候...</div> <div class="pics"> <ul> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018042735524.jpg" alt="" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018044355191.jpg" alt="" /></a></li> <li><a href="#"><img src="http://pigimg.zhongso.com/space/gallery/infoimgs/gc/gcqzj/20100510/2010051018050315609.jpg" alt="" /></a></li> </ul> </div> <div class="btn"><a href="#" id="left" class="left">forward</a><a href="#" class="right" id="right">back</a></div> </div> </body> </html>
提示：您可以先修改部分代码再运行

此段效果在IE8下图轮转的时候特别慢，如果把图片尺寸改小，会变快。这是什么原因，请大家帮忙改改。

作者: ruay133 发布时间: 2010-05-17

火狐下根本无法运行。

作者: zhangyou1010 发布时间: 2010-05-18