门户网站首页常见的多张图片自动切换的代码

<style type="text/css">
.block{
 display:block;
}

#NewsPicTxt
{
 position: relative;
 width: 380px;
 height: 22px;
 border: 1px;
 margin: 0;
 padding-top: 4px;
 text-align: center;
 font-family: Sans-Serif;
 font-weight:bold;
 color: Black;
 font-size: 14px;
 margin-left:auto;
 margin-right:auto;
 margin-top:3px;
}
#NewsPicTxt a,#NewsPicTxt a:hover,#NewsPicTxt a:visited,#NewPicTxt a:link
{
 text-decoration:none;
 color:Black;
}
#NewsPicTxt a:hover
{
 color:Red;
}
 
 #NewsPic {
 border:0;
 height:184px;
 padding:0;
 position:relative;
 width:368px;
}

#NewsPic a
{
 overflow:visible;
 width:100%;
 height:100%;
 border:0;
 text-decoration:none;
}
#NewsPic a:hover,#NewPic a:visited
{
 text-decoration:none;
}
#NewsPic .Picture
{
 position:absolute;
 border:solid 1px black;
 left:0;
 top:0;
 width:100%;
 height:100%;
}
#NewsPic .Nav
{
 position:absolute;
 width:100%;
 height:12px;
 bottom:0px;
 right:0px;
 
}
#NewsPic .Nav span
{
 font: 10px Courier;
 font-weight:normal;
 color: #FFFFFF;
 float:right;
 display:block;
 width: 24px;
 height:100%;
 text-align:center;
 background: #000000;
 
 border-left:solid 1px #FFFFFF;
 
 cursor:pointer;
}
#NewsPic .Nav span.Cur
{
 background:#ce0609;
color:white;
}
#NewsPic .Nav span.Normal
{
color:white;
 background: #000000;
 filter: Alpha(opacity=50);
    opacity: .5;
}
#NewsPic .Nav span a
{
 color:white;
 position:relative;
 display:block;
 width:100%;
 height:100%;
}
#NewsPic .Nav span a:hover
{
 cursor:pointer;
}
 

</style>
<script type="text/javascript">
var isIE=!(navigator.userAgent.indexOf('MSIE')==-1);
var news;
var curNew=0;
var timer;
function init(pic,txt)
{
    if(!pic)pic="NewsPic";
    if(!txt)txt="NewsPicTxt";
 var div=document.getElementById(pic);
 if(!div)return;
 var nav=document.createElement("DIV");
 nav.className="Nav";
 var nodes;
 if(isIE)
 {
     nodes=div.childNodes;
 }
 else
 {
     nodes=childrenNodes(div.childNodes);
 }
 news=new Array(nodes.length);
 for(var i=nodes.length-1;i>=0;i--)
 {
     var element=nodes[i];
    
    
  news[i]={};
  news[i].Element=element;
  news[i].Text=element.getAttribute("title");
  news[i].Url=element.getAttribute("href");
 
  var n=document.createElement("span");
  n.innerHTML="<a herf=/"javascript:;/" οnclick=/"javascript:curNew="+(i-1)+";change('"+pic+"','"+txt+"');/">"+(i+1)+"</a>";
  if(i==curNew)n.className="Cur";
  nav.appendChild(n);
 
  news[i].LinkElement=n;
 }
 div.appendChild(nav);
 curNew--;
 window.setTimeout("change('"+pic+"','"+txt+"')",300);
 
}
function childrenNodes(node)
{
    var c=new Array();
    for(var i=0;i<node.length;i++)
    {
        if(node[i].nodeName.toLowerCase()=="a")
            c.push(node[i]);
    }
    return c;
}
function change(pic,txt)
{
    var div=document.getElementById(pic);
    var text=document.getElementById(txt);
    if(!div)return;
    curNew=curNew+1;
    if(curNew>=news.length)curNew=0;
    for(var i=0;i<news.length;i++)
    {
        if(i==curNew)
        {
            news[i].Element.style.display="block";
            news[i].Element.style.visibility="visible";
            news[i].LinkElement.className="Cur";
            text.innerHTML="<a href=/""+news[i].Url+"/" title=/""+news[i].Text+"/" target=/"_blank/">"+news[i].Text+"</a>";
        }
        else
        {
            news[i].Element.style.visibility="hidden";
            news[i].Element.style.display="none";
            news[i].LinkElement.className="Normal";
        }
    }
    if(timer)window.clearTimeout(timer);
    timer=window.setTimeout("change('"+pic+"','"+txt+"')",5000);
   
}
</script>
                     <div id="NewsPic">
                   
                      
                             <a href="#" title="a" target="_blank" style="visibility:hidden;display:none;">
                                   
                            <img class="Picture" src="01.jpg" alt="1" />
                         </a>
                        
                      
                             <a href="#" title="b" target="_blank" style="visibility:hidden;display:none;">
                                
                            <img class="Picture" src="02.jpg" alt="2" />
                         </a>
                        
                      
                             <a href="#" title="c" target="_blank" style="visibility:hidden;display:none;">
                                
                            <img class="Picture" src="03.jpg" alt="3" />
                         </a>
                        
                      
                             <a href="#" title="d" target="_blank" style="visibility:hidden;display:none;">
                                
                            <img class="Picture" src="04.jpg" alt="4" />
                         </a>
                        
                      
                             <a href="#" title="e" target="_blank" style="visibility:hidden;display:none;">
                                
                            <img class="Picture" src="05.jpg" alt="5" />
                         </a>
                        
                      
                             <a href="#" title="f" target="_blank" style="visibility:hidden;display:none;">
                                
                            <img class="Picture" src="06.jpg" alt="6" />
                         </a>

                        
                 </div>
                 <div id="NewsPicTxt" style="width:370px; overflow:hidden"></div>
                    <script language="javascript">
                         init();
                    </script>