符合 XHTML 1.0 Transitional <!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=gb2312" /> <title>滚动图片切换连播</title> <mce:style type="text/css"><!-- /*图片切换样式开始*/ #ImgChangeMain {WIDTH:356px; HEIGHT:160px;margin:auto; overflow:hidden} #ImgChangeDATA {display:none;visibility:hidden} .ImgChange1 { FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 100%; LINE-HEIGHT:26px; TEXT-ALIGN: center;filter:revealTrans(Transition=23,Duration=2) } .ImgChange1 A { color:#0F0CBF;TEXT-DECORATION: none } .ImgChange1 A:hover { COLOR: #ff0000; TEXT-DECORATION: underline } #ImgChangeTitle{ display:block; } #ImgChangeNUM {FILTER:ALPHA(opacity=70);position:relative;overflow:hidden;z-index:100;height:14px;top:-40px;} #ImgChangeNUM span { font-size:12px;FONT-WEIGHT: bold; COLOR: #FFFFFF; FONT-FAMILY: Arial ; border-left:1px solid #FFFFFF;background:#666666;cursor:pointer;padding:5px} /*图片切换样式结束*/ --></mce:style><style type="text/css" mce_bogus="1">/*图片切换样式开始*/ #ImgChangeMain {WIDTH:356px; HEIGHT:160px;margin:auto; overflow:hidden} #ImgChangeDATA {display:none;visibility:hidden} .ImgChange1 { FONT-WEIGHT: bold; FONT-SIZE: 12px; WIDTH: 100%; LINE-HEIGHT:26px; TEXT-ALIGN: center;filter:revealTrans(Transition=23,Duration=2) } .ImgChange1 A { color:#0F0CBF;TEXT-DECORATION: none } .ImgChange1 A:hover { COLOR: #ff0000; TEXT-DECORATION: underline } #ImgChangeTitle{ display:block; } #ImgChangeNUM {FILTER:ALPHA(opacity=70);position:relative;overflow:hidden;z-index:100;height:14px;top:-40px;} #ImgChangeNUM span { font-size:12px;FONT-WEIGHT: bold; COLOR: #FFFFFF; FONT-FAMILY: Arial ; border-left:1px solid #FFFFFF;background:#666666;cursor:pointer;padding:5px} /*图片切换样式结束*/</style> </head> <body> <div id="ImgChangeMain"><div class="ImgChange1" id="imgchg_change"><a id="imgchg_a1" href="?" mce_href=""><img id="imgchg_img1" width="356" height="140" border="0" alt="" src="" /></a><div id="ImgChangeTitle"><a id="imgchg_a2" href="?" mce_href=""></a></div></div> <div id="ImgChangeDATA"> <a href="http://www.pcpop.com/doc/0/183/183782.shtml" mce_href="http://www.pcpop.com/doc/0/183/183782.shtml" title="http://www.pcpop.com/cnlimgs/2007/0331/0331004900.jpg">时尚向左智能向右 诺基亚6300比拼E50</a> <a href="http://www.pcpop.com/doc/0/183/183287.shtml" mce_href="http://www.pcpop.com/doc/0/183/183287.shtml" title="http://www.pcpop.com/cnlimgs/2007/0329/0329115528.jpg">同价位大火拼 诺基亚5300对索爱W700</a> <a href="http://www.pcpop.com/doc/0/183/183461.shtml" mce_href="http://www.pcpop.com/doc/0/183/183461.shtml" title="http://www.pcpop.com/cnlimgs/2007/0328/0328202708.jpg">日本人改走后门 8款超值日系改版手机</a> <a href="http://www.pcpop.com/doc/0/183/183253.shtml" mce_href="http://www.pcpop.com/doc/0/183/183253.shtml" title="http://www.pcpop.com/cnlimgs/2007/0327/0327192615.jpg">万元奢侈品 三星E918手机华丽美图赏</a> <a href="http://www.pcpop.com/doc/0/183/183220.shtml" mce_href="http://www.pcpop.com/doc/0/183/183220.shtml" title="http://www.pcpop.com/cnlimgs/2007/0327/0327180603.jpg">倾心再夺慕!诺基亚倾慕手机7390写真</a> </div> <div id='ImgChangeNUM' align='right'></div> <mce:script language="javascript" type="text/javascript"><!-- var numfgcolor1="#FFFFFF"; //设置当前数字前景色 var numbgcolor1="#0049A5"; //设置当前数字背景色 var numfgcolor2="#FFFFFF"; //设置非当前数字前景色 var numbgcolor2="#666666"; //设置非当前数字前景色 var linkArr = new Array; var wordArr = new Array; var imageArr = new Array; var dataes=document.getElementById('ImgChangeDATA').getElementsByTagName("a"); var dataes_length=dataes.length; initImgChange(dataes); function initImgChange(dataes) { var numes=""; for (var i=0;i<dataes_length;i++) { linkArr[ i ]=dataes[ i ].href; imageArr[ i ]=dataes[ i ].title; if( document.all ) wordArr[ i ]=dataes[ i ].innerText; else wordArr[ i ]=dataes[ i ].textContent; numes+="<span id='imgchg_td"+(i+1)+"' οnclick='javascript:setFocus1("+(i+1)+")'>"+(i+1)+"</span>"; } document.getElementById('ImgChangeNUM').innerHTML=numes; document.getElementById('imgchg_a1').href = linkArr[0]; document.getElementById('imgchg_a2').href = linkArr[0]; if( document.all ) { document.getElementById('imgchg_a2').innerText = wordArr[0]; } else { document.getElementById('imgchg_a2').textContent = wordArr[0]; } document.getElementById('imgchg_img1').src = imageArr[0]; document.getElementById('imgchg_img1').alt = wordArr[0]; document.getElementById('imgchg_td1').style.color=numfgcolor1; document.getElementById('imgchg_td1').style.backgroundColor=numbgcolor1; } var CurrentIndex=0; function imgchgSetDiv() { if( (CurrentIndex+1) >= dataes_length ) { CurrentIndex=0; } else { CurrentIndex++; } if( document.all ) { document.getElementById('imgchg_change').filters[0].apply(); document.getElementById('imgchg_change').filters[0].Transition = 23; document.getElementById('imgchg_change').filters[0].play(); } document.getElementById('imgchg_a1').href = linkArr[CurrentIndex]; document.getElementById('imgchg_a2').href = linkArr[CurrentIndex]; if( document.all ) { document.getElementById('imgchg_a2').innerText = wordArr[CurrentIndex]; } else { document.getElementById('imgchg_a2').textContent = wordArr[CurrentIndex]; } document.getElementById('imgchg_img1').src = imageArr[CurrentIndex]; document.getElementById('imgchg_img1').alt = wordArr[CurrentIndex]; for( var i=1; i<=5; i++ ) { document.getElementById('imgchg_td'+i).style.color=numfgcolor2; document.getElementById('imgchg_td'+i).style.backgroundColor=numbgcolor2; } var k = CurrentIndex+1; document.getElementById('imgchg_td'+k).style.color=numfgcolor1; document.getElementById('imgchg_td'+k).style.backgroundColor=numbgcolor1; } var imgchgInterval=setInterval(imgchgSetDiv,5000); function setFocus1(set) { clearInterval(imgchgInterval); CurrentIndex = set-2; imgchgSetDiv(); imgchgInterval=setInterval(imgchgSetDiv,5000); } // --></mce:script> </div> </body> </html> 可以兼容FireFox,5 但由于FF不支持IE的CSS滤镜,所以效果单调了一些! 调用时一般通过一个<iframe>来放此代码的 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" > <title>滚动图片切换连播</title> <mce:style type="text/css"><!-- @charset "gb2312"; table,td,select,input,div {font-size:12px;} body { font-size:12px; padding:0px; margin:0px; height:auto;} a img {border:none;} form,input,select,ul,li{margin:0px;padding:0px;} /* 数字按钮框样式 */ #imgTitle {position:relative;left:0px;text-align:left;overflow: hidden;} #imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; } #imgTitle_down {left:0px;text-align: right; width:inherit; } /* 图片框样式 */ .imgClass {border: none;} /* 图片文字框样式 */ #txtFrom {text-align: center;vertical-align: middle;} /* 数字按钮样式 */ .button {text-decoration: none;padding: 2px 7px;background: none;margin: 0px;font: bold 11px sans-serif; border-left:#fff 1px solid;} a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;} a.button:hover {font-family: sans-serif;text-decoration: none;color:#FFFFFF;} .buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;} /*渐变*/ .trans { width:90px; background-color:#000;} --></mce:style><style type="text/css" mce_bogus="1">@charset "gb2312"; table,td,select,input,div {font-size:12px;} body { font-size:12px; padding:0px; margin:0px; height:auto;} a img {border:none;} form,input,select,ul,li{margin:0px;padding:0px;} /* 数字按钮框样式 */ #imgTitle {position:relative;left:0px;text-align:left;overflow: hidden;} #imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; } #imgTitle_down {left:0px;text-align: right; width:inherit; } /* 图片框样式 */ .imgClass {border: none;} /* 图片文字框样式 */ #txtFrom {text-align: center;vertical-align: middle;} /* 数字按钮样式 */ .button {text-decoration: none;padding: 2px 7px;background: none;margin: 0px;font: bold 11px sans-serif; border-left:#fff 1px solid;} a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;} a.button:hover {font-family: sans-serif;text-decoration: none;color:#FFFFFF;} .buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;} /*渐变*/ .trans { width:90px; background-color:#000;}</style> <!--[if IE]> <mce:style type="text/css"><!-- @charset "gb2312"; table,td,select,input,div {font-size:12px;} body { font-size:12px; padding:0px; margin:0px; height:auto;} a img {border:none;} form,input,select,ul,li{margin:0px;padding:0px;} /* 数字按钮框样式 */ #imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;} #imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; } #imgTitle_down {left:0px;text-align: right; width:inherit; } /* 图片框样式 */ .imgClass {border: 0px solid #000;} /* 图片文字框样式 */ #txtFrom {text-align: center;vertical-align: middle;} /* 数字按钮样式 */ .button {text-decoration: none;padding: 2px 7px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;} a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;} a.button:hover {font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; } .buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;} /*渐变*/ .trans { width:90px; background-color:#000;filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);} --></mce:style><style type="text/css" mce_bogus="1">@charset "gb2312"; table,td,select,input,div {font-size:12px;} body { font-size:12px; padding:0px; margin:0px; height:auto;} a img {border:none;} form,input,select,ul,li{margin:0px;padding:0px;} /* 数字按钮框样式 */ #imgTitle {FILTER:ALPHA(opacity=70);position:relative;left:0px;text-align:left;overflow: hidden;} #imgTitle_up {left:0px;text-align: left; height:1px; width:inherit; } #imgTitle_down {left:0px;text-align: right; width:inherit; } /* 图片框样式 */ .imgClass {border: 0px solid #000;} /* 图片文字框样式 */ #txtFrom {text-align: center;vertical-align: middle;} /* 数字按钮样式 */ .button {text-decoration: none;padding: 2px 7px;background: #7B7B63;margin: 0px;font: bold 9px sans-serif; border-left:#fff 1px solid;} a.button, a.button:link, a.button:visited {font-family: sans-serif;text-decoration: none;color:#FFFFFF;background-color: #000000;} a.button:hover {font-family: sans-serif;text-decoration: none;color:#fff;background:#fff; } .buttonDiv {background: #000000;height: 1px;width: 21px;float: left;text-align: center; vertical-align: middle;} /*渐变*/ .trans { width:90px; background-color:#000;filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40);}</style> <![endif]--> </head> <body> <mce:script language="javascript" type="text/javascript"><!-- var imgWidth=365; //图片宽 var imgHeight=120; //图片高 var textFromHeight=0; //焦点字框高度 (单位为px) var textStyle="f12"; //焦点字class style (不是连接class) var textLinkStyle="p1"; //焦点字连接class style var buttonLineOn="#f60"; //button下划线on的颜色 var buttonLineOff="#000"; //button下划线off的颜色 var TimeOut=5000; //每张图切换时间 (单位毫秒); var imgUrl=new Array(); var imgLink=new Array(); var imgtext=new Array(); var imgAlt=new Array(); var adNum=0; imgUrl[1]='http://www.pconline.com.cn/test/toptitle/images/picpath/mengxiangzhaojinxianshikuan.jpg'; imgtext[1]='<a href="http://www.pconline.com.cn/comm/chnews/comm070326/index2.htm" mce_href="http://www.pconline.com.cn/comm/chnews/comm070326/index2.htm" target="_blank" class="'+textLinkStyle+'">通信</a>'; imgLink[1]='http://www.pconline.com.cn/comm/chnews/comm070326/index2.htm'; imgAlt[1]='通信'; imgUrl[2]='http://www.pconline.com.cn/test/toptitle/images/picpath/070329_buy_pricedown_365.jpg'; imgtext[2]='<a href="http://www.pconline.com.cn/mobile/guide/time/0703/989014.html" mce_href="http://www.pconline.com.cn/mobile/guide/time/0703/989014.html" target="_blank" class="'+textLinkStyle+'">手机</a>'; imgLink[2]='http://www.pconline.com.cn/mobile/guide/time/0703/989014.html'; imgAlt[2]='手机'; imgUrl[3]='http://www.pconline.com.cn/test/toptitle/images/picpath/070330BBS365.jpg'; imgtext[3]='<a href="http://www.pconline.com.cn/pcclub/" mce_href="http://www.pconline.com.cn/pcclub/" target="_blank" class="'+textLinkStyle+'">论坛</a>'; imgLink[3]='http://www.pconline.com.cn/pcclub/'; imgAlt[3]='论坛'; imgUrl[4]='http://www.pconline.com.cn/test/toptitle/images/picpath/070331365120.jpg'; imgtext[4]='<a href="http://dp.pconline.com.cn/photoblog/page.do?method=photosPage&aid=5320583" mce_href="http://dp.pconline.com.cn/photoblog/page.do?method=photosPage&aid=5320583" target="_blank" class="'+textLinkStyle+'">摄影部落</a>'; imgLink[4]='http://dp.pconline.com.cn/photoblog/page.do?method=photosPage&aid=5320583'; imgAlt[4]='摄影部落'; document.write('<div id="focuseFrom" style="width:'+(imgWidth+2)+';margin: 0px; padding:0px;height:'+(imgHeight+textFromHeight)+'px; overflow:hidden;">'); function changeimg(n) { adNum=n; window.clearInterval(theTimer); adNum=adNum-1; nextAd(); } function goUrl(){ window.open(imgLink[adNum],'_blank'); } //NetScape开始 if (navigator.appName == "Netscape") { var count=0; for (i=1;i<imgUrl.length;i++) { if( (imgUrl[ i ]!="") && (imgLink[ i ]!="")&&(imgtext[ i ]!="")&&(imgAlt[ i ]!="") ) { count++; } else { break; } } function nextAd(){ if(adNum<(imgUrl.length-1))adNum++; else adNum=1; theTimer=setTimeout("nextAd()", TimeOut); document.images.imgInit.src=imgUrl[adNum]; document.images.imgInit.alt=imgAlt[adNum]; document.getElementById('focustext').innerHTML=imgtext[adNum]; document.getElementById('imgLink').href=imgLink[adNum]; document.getElementById('link'+adNum).style.background=buttonLineOn; for (var i=1;i<=count;i++) { if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;} } } document.write('<a id="imgLink" href="'+imgLink[1]+'" mce_href="'+imgLink[1]+'" target=_blank class="p1"><img src="'+imgUrl[1]+'" mce_src="'+imgUrl[1]+'" name="imgInit" width='+imgWidth+' height='+imgHeight+' border=1 alt="'+imgAlt[1]+'" class="imgClass"></a>'); document.write('<div id="txtFrom" style="height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;"><span id="focustext" class="'+textStyle+'">'+imgtext[1]+'</span></div>'); document.write('<div id="imgTitle" style="width:'+imgWidth+';top:-'+(textFromHeight+13)+'px;height:13px">'); document.write('<div id="imgTitle_down">'); //数字按钮代码开始 for(var i=1;i<imgUrl.length;i++){document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" mce_href="javascript:changeimg('+i+')" class="button" style="cursor:hand" mce_style="cursor:hand" title="'+imgAlt[ i ]+'" οnfοcus="this.blur()">'+i+'</a>');} //数字按钮代码结束 document.write('</div>'); document.write('</div>'); document.write('</div>'); nextAd(); } //NetScape结束 //IE开始 else { var count=0; for (i=1;i<imgUrl.length;i++) { if( (imgUrl[ i ]!="") && (imgLink[ i ]!="")&&(imgtext[ i ]!="")&&(imgAlt[ i ]!="") ) { count++; } else { break; } } function playTran(){ if (document.all) imgInit.filters.revealTrans.play(); } var key=0; function nextAd(){ if(adNum<count)adNum++ ; else adNum=1; if( key==0 ){ key=1; } else if (document.all) { imgInit.filters.revealTrans.Transition=6; imgInit.filters.revealTrans.apply(); playTran(); } document.images.imgInit.src=imgUrl[adNum]; document.images.imgInit.alt=imgAlt[adNum]; document.getElementById('link'+adNum).style.background=buttonLineOn; for (var i=1;i<=count;i++) { if (i!=adNum){document.getElementById('link'+i).style.background=buttonLineOff;} } focustext.innerHTML=imgtext[adNum]; theTimer=setTimeout("nextAd()", TimeOut); } document.write('<a target="_self" href="javascript:goUrl()" mce_href="javascript:goUrl()"><img style="FILTER: revealTrans(duration=1,transition=5);" mce_style="FILTER: revealTrans(duration=1,transition=5);" src="javascript:nextAd()" mce_src="javascript:nextAd()" width="'+imgWidth+'" height="'+imgHeight+'" border="0" vspace="0" name="imgInit" class="imgClass"></a>'); document.write('<div id="txtFrom" style="height:'+textFromHeight+'px;line-height:'+textFromHeight+'px;width:'+imgWidth+'px;overflow:hidden;"><span id="focustext" class="'+textStyle+'"></span></div>'); document.write('<div id="imgTitle" style="width:'+imgWidth+';top:-'+(textFromHeight+16)+'px;height:18px">'); document.write(' <div id="imgTitle_down"> <a class="trans"></a>'); //数字按钮代码开始 for(var i=1;i<imgUrl.length;i++){document.write('<a id="link'+i+'" href="javascript:changeimg('+i+')" mce_href="javascript:changeimg('+i+')" class="button" style="cursor:hand" mce_style="cursor:hand" title="'+imgAlt[ i ]+'" οnfοcus="this.blur()">'+i+'</a>');} //数字按钮代码结束 document.write('</div>'); document.write('</div>'); document.write('</div>'); } //IE结束 // --></mce:script> </body> </html>