jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果ie,firefox

jb51站长推荐的用js实现的多浏览器支持的图片轮换展示效果在ie,firefox和测试一切正常,建议以后大家都要用这样的兼容性比较好的代码
</p> <p>body {margin:0 auto; padding:0; text-align:center }<br /> .box400 {margin:0 auto;padding:0;width:400px}<br /> #f_menu {<br /> margin: 0px auto; overflow: hidden; width: 400px; height: 20px<br /> }<br /> #f_menu a {<br /> display: block; background: #393939; float: left; overflow: hidden; color: #fff; line-height: 20px; margin-right: 1px; border-bottom: #fff 1px solid; height: 20px; text-align: center<br /> }<br /> #f_menu a:hover {<br /> background: #ff8500<br /> }<br /> #f_menu a.on {<br /> background: #ff8500<br /> }<br /> #f_div {<br /> margin: 0px auto; overflow: hidden; width: 400px; height: 200px<br /> }<br /> #f_addiv {<br /> overflow: hidden; width: 100%; height: 25px<br /> }<br /> #f_imgdiv {<br /> overflow: hidden; width: 100%; height: 200px<br /> }<br /> #f_img {<br /> border-right: 0px; border-top: 0px; filter: progid:dximagetransform.microsoft.fade(overlap=1.00); border-left: 0px; border-bottom: 0px<br /> }<br /> #f_infodiv {<br /> width: 100%; position: relative; top: -14px<br /> }<br /> #f_buttondiv {<br /> overflow: hidden; width: 100%; margin-right: 1px; height: 14px; text-align: left<br /> }<br /> #f_line {<br /> background: #fff; filter: progid:dximagetransform.microsoft.alpha(startx=0, starty=0, finishx=50, finishy=100,style=1,opacity=0,finishopacity=100); margin-left: 270px; overflow: hidden; width: 130px; height: 1px<br /> }<br /> #f_buttondiv div {<br /> background: #fff; float: right; width: 1px; height: 14px<br /> }<br /> #f_buttondiv .bg {<br /> background: #fff; filter: alpha(opacity=40); float: right; width: 14px; height: 14px<br /> }<br /> #f_buttondiv a {<br /> display: block; font-size: 10px; float: right; overflow: hidden; width: 14px; color: #fff; padding-top: 0px; font-family: arial, helvetica, sans-serif; position: absolute; height: 14px; text-align: center; text-decoration: none<br /> }<br /> #f_buttondiv a:link {<br /> color: #000<br /> }<br /> #f_buttondiv a:visited {<br /> color: #000<br /> }<br /> #f_buttondiv a:active {<br /> color: #000<br /> }<br /> #f_buttondiv a:hover {<br /> background: #ff840c; color: #fff<br /> }<br /> #f_buttondiv a.on:link {<br /> background: #ff840c; color: #fff<br /> }<br /> #f_buttondiv a.on:visited {<br /> background: #ff840c; color: #fff<br /> }<br /> #f_buttondiv a.on:active {<br /> background: #ff840c; color: #fff<br /> }<br /> #f_buttondiv a.on:hover {<br /> background: #ff840c; color: #fff<br /> }<br /> #f_buttondiv a.on:hover {<br /> background: #ff6600<br /> }<br /> #f_text {<br /> overflow: hidden; line-height: 26px; height: 26px; text-align: center<br /> }<br /> #f_text a:link {<br /> color: #000; text-decoration: none<br /> }<br /> #f_text a:visited {<br /> color: #000; text-decoration: none<br /> }<br /> #f_text a:active {<br /> color: #000; text-decoration: none<br /> }<br /> #f_text a:hover {<br /> color: #ff6600; text-decoration: none<br /> } </p> <p><!--<br /> function p$(string){<br /> document.write(string);<br /> }<br /> function $(id){<br /> return document.getelementbyid(id);<br /> }<br /> function change_menu(id,content_id,num,total_ztc_menu,menu_on,menu_off){<br /> for (var i=1;i </p> <p><span class="" id="f_now"></span><br /> <!--图片区域--> </p> <p><!--数字按钮区域--> </p> <table style="border-right: #bcbcbc 1px solid;border-top: #bcbcbc 1px solid;border-left: #bcbcbc 1px solid;border-bottom: #bcbcbc 1px solid" cellspacing="1" cellpadding="0" width="100%" bgcolor="#ffffff" border="0"> <tbody> <tr> <td align="middle" bgcolor="#efefef"><!--焦点文字区域--> </p> <p><!--<br /> //可修改区域<br /> var imgwidth=400;<br /> var imgheight=200;<br /> var _timeout_=5000;<br /> var show_text = true; //是否显示焦点文字<br /> var timeout=_timeout_;<br /> var timeout2=_timeout_/2;//onmouseout img后需要切换的时间<br /> var now=0; //第一张图<br /> var target="_blank"; //打开方式<br /> var button_on ='on'; //当前焦点对应按钮的样式名<br /> var button_off ='';//非当前焦点对应按钮的样式名<br /> //不可修改区域<br /> var imgurl = new array();<br /> var imgtext = new array();<br /> var imglink = new array();<br /> var imgalt= new array();<br /> var menulist = new array();//菜单menu<br /> var ver=2; //兼容浏览器版本 默认2 为非ie<br /> var firsttime=true;<br /> var n =-1;<br /> //菜单menu<br /> menulist[++n]='内外兼修';<br /> imgurl[n]='http://www.pcauto.com.cn/newcar/abroad/porsche/images/picpath/070308techartl.jpg';<br /> imgtext[n]='内外兼修 techart改装600匹卡宴turbo';<br /> imglink[n]='http://www.pcauto.com.cn/newcar/abroad/porsche/0703/430540.html';<br /> imgalt[n]='内外兼修 techart改装600匹卡宴turbo';<br /> //菜单menu<br /> menulist[++n]='新福克斯';<br /> imgurl[n]='http://www.pcauto.com.cn/nation/brand/changanford/images/picpath/07kuanfukesi4002000309.jpg';<br /> imgtext[n]='';<br /> imglink[n]='http://www.pcauto.com.cn/nation/brand/changanford/0703/430704.html';<br /> imgalt[n]='07款福特福克斯上市 售价12.98-16.58万';<br /> //菜单menu<br /> menulist[++n]='悍马姐妹';<br /> imgurl[n]='http://www.pcauto.com.cn/community/carnbeauty/images/picpath/8_mthwoei4.jpg';<br /> imgtext[n]='';<br /> imglink[n]='http://piclib.pcauto.com.cn/piclib/x_index.jsp';<br /> imgalt[n]='捍马车展的孪生姐妹 超酷';<br /> //菜单menu<br /> menulist[++n]='脱衣秀';<br /> imgurl[n]='http://www.pcauto.com.cn/news/yjpl/medium/images/picpath/lishufu-a98sudfoa.jpg';<br /> imgtext[n]='';<br /> imglink[n]='http://www.pcauto.com.cn/news/yjpl/medium/0703/430599.html';<br /> imgalt[n]='吉利李书福委员脱衣秀国货 呼吁支持国货';<br /> //菜单menu<br /> menulist[++n]='养路费';<br /> imgurl[n]='http://www.pcauto.com.cn/news/hyxw/images/picpath/yanglufei-400200-809asudfol.jpg';<br /> imgtext[n]='';<br /> imglink[n]='http://www.pcauto.com.cn/news/hyxw/0703/430739.html';<br /> imgalt[n]='人大代表建议全国统一养路费征收法规';<br /> //菜单menu<br /> menulist[++n]='大发';<br /> imgurl[n]='http://www.pcauto.com.cn/nation/brand/other/images/picpath/8e026ba4d70309400200.jpg';<br /> imgtext[n]='';<br /> imglink[n]='http://www.pcauto.com.cn/nation/brand/other/0703/430723.html';<br /> imgalt[n]='大发国产小车年中上市 1.3和1.5两种排量';<br /> var count=0;<br /> for (var i=0;i");<br /> p$("<!--"); p$("#f_menu a{width:"+each_width+"px;}"); p$("#f_menu #f_menu"+(count-1)+"{width:"+last_width+"px; margin:0;}"); p$("-->");<br /> p$("");<br /> function change(){<br /> if (ver==1){<br /> with($('f_img').filters[0]){<br /> transition=1;<br /> apply();<br /> play();<br /> }<br /> }<br /> if (firsttime){ firsttime=false;timeout=_timeout_/1000;}<br /> else{<br /> $('f_img').src=imgurl[now];<br /> $('f_img').alt=imgalt[now];<br /> $('f_imglink').href=imglink[now];<br /> if (show_text) $('f_text').innerhtml=imgtext[now];<br /> for (var i=0;i=imgurl.length-1)?0:now+1;<br /> timeout=_timeout_;<br /> }<br /> thetimer=settimeout("change()", timeout);<br /> }<br /> function b_change(num){<br /> window.clearinterval(thetimer);<br /> now=num;<br /> firsttime=false;<br /> change();<br /> }<br /> //draw 渐变line （即css:f_line)<br /> function draw_line(){<br /> var div = document.createelement("div");<br /> div.id = 'f_line';<br /> $('f_infodiv').insertbefore(div,$('f_infodiv').childnodes.item(0));<br /> }<br /> //表现层 start<br /> //menu<br /> for(var i=0;i=0;i--){<br /> var div_bg = document.createelement("div");<br /> div_bg.id = 'div_bg'+i;<br /> div_bg.classname='bg';<br /> $('f_buttondiv').appendchild(div_bg);<br /> var a = document.createelement("a");<br /> a.id = 'b'+i;<br /> a.classname = (i==now+1)?"button_on":"button_off";<br /> a.title=imgalt[i];<br /> a.innerhtml=i+1;<br /> a.href='javascript:b_change('+i+')';<br /> $('div_bg'+i).appendchild(a);<br /> var div= document.createelement("div");<br /> $('f_buttondiv').appendchild(div);<br /> }<br /> if (show_text) $('f_text').innerhtml = imgtext[now];<br /> //表现层 end<br /> $('f_img').onmouseover=function(){window.clearinterval(thetimer);}<br /> $('f_img').onmouseout=function(){thetimer=settimeout("change()", timeout2);}<br /> try{ //滤镜版本<br /> new activexobject("dximagetransform.microsoft.fade");<br /> $('f_img').filters[0].play();<br /> ver=1;<br /> draw_line();<br /> }<br /> catch (e){ver=2;}<br /> var thetimer = settimeout("change()", _timeout_/1000);<br /> //--> </p> </td> </tr> </tbody> </table> <p>
[ctrl+a 全选 注:如需引入外部js需刷新才能执行]