纯JS实现图片幻灯片效果，兼容IE7,firefox

<! 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 > 纯JS实现图片幻灯片效果，兼容IE7,firefox - svnhost.cn </ title >

</ head >

< body >

< script >

var widths = 282 ;

var heights = 164 ;

var counts = 6 ;

img1 = new Image ();img1.src = ' http://www.svnhost.cn/images/logo.gif ' ;

img2 = new Image ();img2.src = ' http://www.svnhost.cn/images/svn_work.gif ' ;

img3 = new Image ();img3.src = ' http://www.svnhost.cn/images/logo.gif ' ;

img4 = new Image ();img4.src = ' http://www.svnhost.cn/images/svn_work.gif ' ;

img5 = new Image ();img5.src = ' http://www.svnhost.cn/images/logo.gif ' ;

img6 = new Image ();img6.src = ' http://www.svnhost.cn/images/svn_work.gif ' ;

url1 = new Image ();url1.src = ' http://www.svnhost.cn ' ;

url2 = new Image ();url2.src = ' http://www.svnhost.cn ' ;

url3 = new Image ();url3.src = ' http://www.svnhost.cn ' ;

url4 = new Image ();url4.src = ' http://www.svnhost.cn ' ;

url5 = new Image ();url5.src = ' http://www.svnhost.cn ' ;

url6 = new Image ();url6.src = ' http://www.svnhost.cn ' ;

var nn = 1 ;

var key = 0 ;

function change_img()

{ if (key == 0 ){key = 1 ;}

else if (document.all)

{document.getElementById( " pic " ).filters[ 0 ].Apply();document.getElementById( " pic " ).filters[ 0 ].Play(duration = 2 );}

eval( ' document.getElementById("pic").src=img ' + nn + ' .src ' );

eval( ' document.getElementById("url").href=url ' + nn + ' .src ' );

for ( var i = 1 ;i <= counts;i ++ ){document.getElementById( " xxjdjj " + i).className = ' axx ' ;}

document.getElementById( " xxjdjj " + nn).className = ' bxx ' ;

nn ++ ; if (nn > counts){nn = 1 ;}

tt = setTimeout( ' change_img() ' , 4000 );}

function changeimg(n){nn = n;window.clearInterval(tt);change_img();}

document.write( ' <style> ' );

document.write( ' .axx{padding:1px 7px;border-left:#cccccc 1px solid;} ' );

document.write( ' a.axx:link,a.axx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#666;} ' );

document.write( ' a.axx:active,a.axx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#999;} ' );

document.write( ' .bxx{padding:1px 7px;border-left:#cccccc 1px solid;} ' );

document.write( ' a.bxx:link,a.bxx:visited{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;} ' );

document.write( ' a.bxx:active,a.bxx:hover{text-decoration:none;color:#fff;line-height:12px;font:9px sans-serif;background-color:#D34600;} ' );

document.write( ' </style> ' );

document.write( ' <div style="width: ' + widths + ' px;height: ' + heights + ' px;overflow:hidden;text-overflow:clip;"> ' );

document.write( ' <div> <a id="url"> <img id="pic" style="border:0px;filter:progid:dximagetransform.microsoft.wipe(gradientsize=1.0,wipestyle=4, motion=forward)" width= ' + widths + ' height= ' + heights + ' /> </a> </div> ' );

document.write( ' <div style="filter:alpha(style=1,opacity=10,finishOpacity=80);background: #888888;width:100%-2px;text-align:right;top:-12px;position:relative;margin:1px;height:12px;padding:0px;margin:0px;border:0px;"> ' );

for ( var i = 1 ;i < counts + 1 ;i ++ ){document.write( ' <a href="javascript:changeimg( ' + i + ' );" id="xxjdjj ' + i + ' " class="axx" target="_self"> ' + i + ' </a> ' );}

document.write( ' </div> </div> ' );

change_img();

</ script >

</ body >

</ html >