图片自动更换的问题

Question

1请问下面的代码怎么改成四个图片连续更换，我把下面的img连接去掉两个，可以代码出现了问题，（我对javascript不熟）2最下角的数字没有按钮显示，而且要右边显示，望大家帮助，急用，谢谢！！！<script>
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:;\" onclick=\"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+"')",3000);}
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="NewsPicTxt"></div>
                         <div id="NewsPic" style="width:297px;overflow:hidden;"><a title="您准备好迎接线程挑战了吗？" style="DISPLAY: block; VISIBILITY: visible" href="http://z.csdn.net/adclick.php?bannerid=395" target="_blank"><img class="Picture" height="180" alt="您准备好迎接线程挑战了吗？" src="http://zi.csdn.net/news_picture/280180intel.GIF" width="280"/></a><a title=" solaris开源免费" style="DISPLAY: none; VISIBILITY: hidden" href="http://z.csdn.net/adclick.php?bannerid=459" target="_blank"><img class="Picture" height="180" alt=" solaris开源免费" src="http://zi.csdn.net/news_picture/CSDN_Homepage_Banner_280x180.gif" width="280"/></a><a title="共享软件与您共享" style="DISPLAY: none; VISIBILITY: hidden" href="http://z.csdn.net/adclick.php?bannerid=401" target="_blank"><img class="Picture" height="180" alt="共享软件与您共享" src="http://zi.csdn.net/news_picture/routead1214.gif" width="280"/></a><a title="赢取积分，兑换大礼！" style="DISPLAY: none; VISIBILITY: hidden" href="http://z.csdn.net/adclick.php?bannerid=410" target="_blank"><img class="Picture" height="180" alt="赢取积分，兑换大礼！" src="http://zi.csdn.net/news_picture/280180intelxiu.gif" width="280"/></a><a title="微软机器人大赛" style="DISPLAY: none; VISIBILITY: hidden" href="http://z.csdn.net/adclick.php?bannerid=369" target="_blank"><img class="Picture" height="180" alt="微软机器人大赛" src="http://zi.csdn.net/news_picture/280180msnluhong.gif" width="280"/></a><a title="Oracle OTN 探索活动 周周送大奖" style="DISPLAY: none; VISIBILITY: hidden" href="http://z.csdn.net/adclick.php?bannerid=372" target="_blank"><img class="Picture" height="180" alt="Oracle OTN 探索活动 周周送大奖" src="http://zi.csdn.net/news_picture/280×187 1217 oracleotn.gif" width="280"/></a></div> <script type="text/javascript">
                        init();
                        </script>

Answer 1

写这么多为什么不用ASP.NET Ajax的AjaxToolkit-->SlideShowExtender
什么都搞定．

Answer 2

不知这个对你有没帮助<!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>
<style type="text/css">
<!--/*－－－－－－图片大小 240*180－－－－－－－－－*/
#f_div {MARGIN: 0px auto; OVERFLOW: hidden; WIDTH: 208px; HEIGHT: 158px;}
#f_imgDiv { OVERFLOW: hidden; WIDTH: 200px; HEIGHT: 150px; margin:auto; margin-top:4px;}#f_img {
BORDER-RIGHT: 0px; BORDER-TOP: 0px; FILTER: progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); BORDER-LEFT: 0px; BORDER-BOTTOM: 0px
}
#f_infoDiv {WIDTH: 100%; POSITION: relative; TOP: -15px; margin-right:18px;}
#f_buttonDiv {
OVERFLOW: hidden; WIDTH: 100%; MARGIN-RIGHT: 1px; HEIGHT: 14px; TEXT-ALIGN: left
}
#f_line {
BACKGROUND: #fff; FILTER: progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100);
 MARGIN-LEFT: 105px; OVERFLOW: hidden; WIDTH: 100px; HEIGHT: 1px
}
#f_buttonDiv DIV {
BACKGROUND: #fff; FLOAT: right; WIDTH: 1px; HEIGHT: 14px
}
#f_buttonDiv .bg {
BACKGROUND: #fff; FILTER: Alpha(Opacity=40); FLOAT: right; WIDTH: 14px; HEIGHT: 14px
}
#f_buttonDiv A {
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
}
#f_buttonDiv A:link {
COLOR: #000
}
#f_buttonDiv A:visited {
COLOR: #000
}
#f_buttonDiv A:active {
COLOR: #000
}
#f_buttonDiv A:hover {
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:link {
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:visited {
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:active {
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover {
BACKGROUND: #ff840c; COLOR: #fff
}
#f_buttonDiv A.on:hover {
BACKGROUND: #ff6600
}
#f_text {
OVERFLOW: hidden; LINE-HEIGHT: 25px; HEIGHT: 25px; TEXT-ALIGN: center; font-weight:bold
}
.f12b{ font-size:12px;}
#f_text A:link {
COLOR: #000; TEXT-DECORATION: none
}
#f_text A:visited {
COLOR: #000; TEXT-DECORATION: none
}
#f_text A:active {
COLOR: #000; TEXT-DECORATION: none
}#f_text A:hover {
COLOR: #ff6600; TEXT-DECORATION: none
}
/*新闻图片样式结束*/
-->-->
</style>
</head><body>
 <!--风采图片开始-->
<div id="f_div">
<!--图片区域-->
<div id="f_imgDiv"></div>
<div id="f_infoDiv">
<!--数字按钮区域-->
<div id="f_buttonDiv"></div>
</div>
</div>
<!--焦点文字区域-->
<DIV class="f12b" id="f_text" style="display:none;"></DIV>
      <SCRIPT language="javascript" type="text/javascript">
<!--
//可修改区域
var imgWidth=200;
var imgHeight=150;
var _timeOut_=5000;
var show_text = true; //是否显示焦点文字
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间
var now=0;              //第一张图
var target="_blank";   //打开方式
var button_on ='on'; //当前焦点对应按钮的样式名
var button_off ='';//非当前焦点对应按钮的样式名
//不可修改区域
var imgUrl = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgAlt= new Array();
//var menuList = new Array();//菜单menu
var menuList = ["","","","",""];//菜单menu
var ver=2; //兼容浏览器版本 默认2 为非ie
var firstTime=true;
var n =-1;
//--------------------------------------------------------------------------
  var imgUrl='newimages/200711271039360.jpg|newimages/200711271009210.jpg|newimages/200711190956150.jpg|newimages/200711170902210.jpg|newimages/200711131051180.jpg|';
  var imgLink='/internews/120071127/1103300.html|info/20071127/100406.html|s/internews/120071119/1095347.html|m/news/info/20071117/084958.html|news/internews/120071113/1104806.html|';
  var imgText='<a href="ews/internews/120071127/1103300.html" target="_blank">福特Kuga量产型曝光 明年上市有望</a>|<a href="ews/info/20071127/100406.html" target="_blank">吉利远景获07浙江省最受欢迎公务</a>|<a href="news/internews/120071119/1095347.html" target="_blank">现代历史上第一款后驱跑车 劳恩斯C</a>|<a href="ws/info/20071117/084958.html" target="_blank">大众2010款甲壳虫曝光 将推出中国</a>|<a href="news/internews/120071113/1104806.html" target="_blank">阿斯顿马丁发布V8 Vantage N400 Ro</a>|';
  var imgAlt='福特Kuga量产型曝光 明年上市有望国产|吉利远景获07浙江省最受欢迎公务车美誉|现代历史上第一款后驱跑车 劳恩斯Coupe|大众2010款甲壳虫曝光 将推出中国版本 |阿斯顿马丁发布V8 Vantage N400 Roadster|';
   //-------------图片路径
  var end=imgUrl.lastIndexOf("|");
  imgUrl=imgUrl.substr(0,end);
  imgUrl=imgUrl.split('|');
  //--------------------图片连接
  end=imgLink.lastIndexOf("|");
  imgLink=imgLink.substr(0,end);
  imgLink=imgLink.split('|');
  //--------------------图片文字
  end=imgText.lastIndexOf("|");
  imgText=imgText.substr(0,end);
  imgText=imgText.split('|');
  //--------------------鼠标滑到图片上的文字显示
  end=imgAlt.lastIndexOf("|");
  imgAlt=imgAlt.substr(0,end);
  imgAlt=imgAlt.split('|');//-------------------------------------------------------------------
var count=0;
for (var i=0;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) {
count++;
}
else {
break;
}
}function $(id){
return document.getElementById(id);
}function change(){
if (ver==1){
with($('f_img').filters[0]){
Transition=1;
apply();
play(); 
}
}
if (firstTime){
firstTime=false;
timeOut=_timeOut_/1000;
}
else{  
$('f_img').src=imgUrl[now];
$('f_img').alt=imgAlt[now];
$('f_imgLink').href=imgLink[now];
if (show_text) $('f_text').innerHTML=imgText[now];
for (var i=0;i<count;i++) {
$('b'+i).className="button";}
$('b'+now).className="on";
 
now=(now>=imgUrl.length-1)?0:now+1;
timeOut=_timeOut_;  
}
theTimer=setTimeout("change()", timeOut);
}function b_change(num){
window.clearInterval(theTimer); 
now=num;
firstTime=false;
change();
}
//draw 渐变line （即css:f_line)
function draw_line(){
var div = document.createElement("div");
div.id = 'f_line';
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));
}
//表现层 start
//---------------  图片
var a = document.createElement("a");
a.id="f_imgLink";
a.target=target;
a.href=imgLink[now];
$('f_imgDiv').appendChild(a);
var img = document.createElement("img"); img.id="f_img";
img.width=imgWidth;
img.height=imgHeight;
img.src=imgUrl[now];
img.alt=imgAlt[now];
a.appendChild(img);
//---------------   数字按钮
for (var i=count-1;i>=0;i--){
var div_bg = document.createElement("div");
div_bg.id = 'div_bg'+i;div_bg.className='bg';
$('f_buttonDiv').appendChild(div_bg);
var a = document.createElement("a");
a.id = 'b'+i;
a.className = (i==now+1)?"button_on":"button_off";
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href='javascript:b_change('+i+')';
$('div_bg'+i).appendChild(a);
var div= document.createElement("div");
$('f_buttonDiv').appendChild(div);
}     
if (show_text) $('f_text').innerHTML = imgText[now];
//-----------------------  表现层 endtry{  //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
$('f_img').filters[0].play();   
ver=1;
draw_line(); 
}
catch (e){ver=2;}
var theTimer = setTimeout("change()", _timeOut_/1000);
//-->
</SCRIPT>
<!--风采图片结束--> </body>
</html>