今天正好有时间，总结一下通过javascript来实现切换图片，可以通过以下几种方法实现：

    

方法一：实现简单的图片切换

      可以自己配置,自己设置每张图片切换的时间间隔,自己设置每张图片的路径(绝对,相对路径都可以) ­

<html> 
<head> 
<title>例子1：实现简单的图片切换</title> 
<script language=javascript> 
var curIndex=0; 
//时间间隔 单位毫秒 
var timeInterval=1000; 
var arr=new Array(); 
arr[0]="1.jpg"; 
arr[1]="2.jpg"; 
arr[2]="3.jpg"; 
setInterval(changeImg,timeInterval); 
function changeImg() 
   { 
    var obj=document.getElementById("obj"); 
    if (curIndex==arr.length-1) 
    { 
        curIndex=0; 
    } 
    else 
    { 
        curIndex+=1; 
    } 
    obj.src=arr[curIndex]; 
    } 
</script> 
</head> 
<body> 
<img id=obj src ="1.jpg" border =0 /> 
</body> 
</html>

­

方法二：实现幻灯片切换图片

       包含的二个JS文件中，包括关于adRotator所有函数的实现。 ­

<html> 
<head> 
<script language="javascript" src="CreateDiv.js4"></script> 
<script language="javascript" src="aaaaaa.js4"></script> 
</head> 
<body> 
<form id=form1> 
<table cellspacing=0 cellspadding=0 bodor=0 width=100%> 
   <tr> 
      <td> 
        <div id="AdRotator" class="AdRotator" style="margin-bottom:0px;"></div> 
        </td> 
    </tr> 
</table> 
    <INPUT id="hdImg1" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406304.jpg"/> 
    <INPUT id="hdImg2" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406305.jpg"/> 
    <INPUT id="hdImg3" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406303.jpg"/> 
    <INPUT id="hdImg4" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406302.jpg"/> 
    <INPUT id="hdImg5" type="hidden" name="hdImg" value="http://www.webjx.com/img/200406301.jpg"/> 
<SCRIPT language="JavaScript"> 
<!-- 
var hdImg = new Array(); 
for( var i = 0 ; i < 5 ; i++) 
{ 
eval（"hdImg[" + i + "] = document.forms[0].elements.hdImg" + (i+1) + ".value"); 
}; 
adRotator.initialize("AdRotator"); 
for( var i=0 ; i < hdImg.length ; i ++) 
{ 
adRotator.add(hdImg[i]); 
} 
adRotator.play(); 
//--> 
  </SCRIPT> 
</form> 
</body> 
</html>

­

方法三：js和flash结合的图片切换，例如现在好多网站上面的新闻切换，并可链接地址。­

<html> 
<head> 
<title>js和flash切换图片</title> 
</head> 
<body> 
    <a target="_self" href="javascript:goUrl()"><span class="f14b"> 
<script type="text/javascript"> 
imgUrl1="http://proimg.163.com/channel6/ebay/mail_145x90.jpg"; 
imgtext1="网页教学网制作素材" 
imgLink1=escape("http://cimg2.163.com/cnews/2007/11/20/200711200904102880e.jpg"); 
imgUrl2="http://www.webjx.com/img/200406302.jpg"; 
imgtext2="网页教学网网页制作专区" 
imgLink2=escape("http://www.webjx.com/htmldata/sort/3.html"); 
imgUrl3="http://www.webjx.com/img/200406303.jpg"; 
imgtext3="网页教学网网页特效专区" 
imgLink3=escape("http://www.webjx.com/htmldata/sort/5.html"); 
imgUrl4="http://www.webjx.com/img/200406304.jpg"; 
imgtext4="网页教学网视频教程" 
imgLink4=escape("http://www.webjx.com/htmldata/sort/15.html"); 
imgUrl5="http://www.webjx.com/img/200406305.jpg"; 
imgtext5="网页教学网网页制作书籍" 
imgLink5=escape("http://www.webjx.com/htmldata/sort/7.html"); 
var focus_width=280 
var focus_height=200 
var text_height=18 
var swf_height = focus_height+text_height 
­
var pics=imgUrl1+"|"+imgUrl2+"|"+imgUrl3+"|"+imgUrl4+"|"+imgUrl5 
var links=imgLink1+"|"+imgLink2+"|"+imgLink3+"|"+imgLink4+"|"+imgLink5 
var texts=imgtext1+"|"+imgtext2+"|"+imgtext3+"|"+imgtext4+"|"+imgtext5 
­
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="'+ focus_width +'" height="'+ swf_height +'">'); 
­
document.write('<param name="allowScriptAccess" value="sameDomain"><param name="movie" value="http://www.webjx.com/js/focus.swf"><param name="quality" value="high"><param name="bgcolor" value="#F0F0F0">'); 
­
document.write('<param name="menu" value="false"><param name=wmode value="opaque">'); 
­
document.write('<param name="FlashVars" value="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'">'); 

document.write('<embed src="pixviewer.swf" wmode="opaque" FlashVars="pics='+pics+'&links='+links+'&texts='+texts+'&borderwidth='+focus_width+'&borderheight='+focus_height+'&textheight='+text_height+'" menu="false" bgcolor="#F0F0F0" quality="high" width="'+ focus_width +'" height="'+ focus_height +'" allowScriptAccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />');   
document.write('</object>'); 
­
</script> 
    </span></a><span id="focustext" class="f14b"></span> 
</body> 
</html>

­

­

本文参考：

http://www.webjx.com/htmldata/2005-10-01/1128143647.html

http://www.mflady.com/space/index.php/126067/viewspace-21760