新人问问题...JS的图片阅览

我常常看到有些网站的主页有些图片 下面有数字
点击数字 可以跳到对应的图片 `不点击图片会按照一定的顺序变换`

例子有：

http://mobile.zol.com.cn/  中关村在线
http://www.80diy.com/
上面2个是用FLASH9达到这种效果

http://www.pconline.com.cn/mobile/  太平洋网
这是用javaScript的`


我用C#的ImageMap控件也可以实现此效果
但我想知道javaScript是如何实现的`
小弟不才`能否给出具体代码

看了里面源代码
具体是这样的：但我发现我不能对代码进行修改`怪`我会自己慢慢琢磨下去`希望有高手提点
<style>
<!--

/*外筐*/
#f_div{ width:262px; height:197px; overflow:hidden;}
#f_imgDiv{}
#f_img{FILTER: revealTrans(duration=1,transition=6); border:#000 1px solid;}
#f_buttonDiv{ width:100%; height:14px;top:-15px; position:relative; overflow:hidden; }
#all_button{ background:#fff;}
#f_line{ width:100px; float:right;background-color:#000; filter : progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=100, finishY=100,style=1,opacity=0,finishOpacity=40); }
#f_buttonDiv a{width:22px;height:14px; padding:0 !important; padding-top:1px; float:right; color:#fff; font-weight:bold; border-left:1px #fff solid; overflow:hidden; }
#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{ background:#000;}
#f_buttonDiv a:hover{background:#FF840C;}
#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#FF840C;}
/*文字*/
#f_text{ position:relative; top:-12px; text-align:center;}
-->
</style>
<script>
var imgUrl = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgAlt= new Array();
var imgWidth=260;
var imgHeight=195;
var _timeOut_=5000;
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2; //onmouseout img后需要切换的时间
var now=0;
var firstTime=true;
var target="_blank";   //打开方式
var ver=2; //兼容浏览器版本 默认2 为非ie


imgUrl[0]=src= "http://www.pconline.com.cn/mobile/guide/time/images/picpath/1110_buy_bumai_260.jpg";
imgText[0]='<A HREF="http://www.pconline.com.cn/mobile/guide/time/0611/900772.html" TARGET="_blank">购买要多加小心!近期入手需慎重的水货机盘</A>';
imgLink[0]='http://www.pconline.com.cn/mobile/guide/time/0611/900772.html';
imgAlt[0]='购买要多加小心!近期入手需慎重的水货机盘';



imgUrl[1]='C:\Documents and Settings\LaN\My Documents\My Pictures\__City.jpg';
imgText[1]='<A HREF="http://www.pconline.com.cn/coolshow/new/mobile/0611/901805.html" TARGET="_blank">全民都来听音乐!诺基亚超值音乐手机5200图</A>';
imgLink[1]='http://www.pconline.com.cn/coolshow/new/mobile/0611/901805.html';
imgAlt[1]='全民都来听音乐!诺基亚超值音乐手机5200图';




imgUrl[2]='http://www.pconline.com.cn/mobile/review/images/picpath/1110_pc_ef51_260.jpg';
imgText[2]='<A HREF="http://www.pconline.com.cn/mobile/review/0611/901848.html" TARGET="_blank" >音乐魔盒第二击!明基西门子音乐手机EF51评</A>';
imgLink[2]='http://www.pconline.com.cn/mobile/review/0611/901848.html';
imgAlt[2]='音乐魔盒第二击!明基西门子音乐手机EF51评';




imgUrl[3]='http://www.pconline.com.cn/mobile/news/hgxz/images/picpath/1110_new_n903_260.jpg';
imgText[3]='<A HREF="http://www.pconline.com.cn/mobile/news/hgxz/0611/902172.html" TARGET="_blank">超越VGA完全PK夏普!NEC最新靓屏机王N903i曝</A>';
imgLink[3]='http://www.pconline.com.cn/mobile/news/hgxz/0611/902172.html';
imgAlt[3]='超越VGA完全PK夏普!NEC最新靓屏机王N903i曝';



imgUrl[4]='http://www.pconline.com.cn/mobile/photo/images/picpath/mobile_260x195_big_foucs.jpg';
imgText[4]='<A HREF="http://adv.pconline.com.cn/adpuba/click?adid=28416&id=pc.sjtx.jdtp.&" TARGET="_blank">华扬联众</A>';
imgLink[4]='http://adv.pconline.com.cn/adpuba/click?adid=28416&id=pc.sjtx.jdtp.&';
imgAlt[4]='华扬联众';




var count=0;
for (i=0;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) {
count++;
} else {
break;
}
}

function change(){
    if (ver==1){
with(eval('f_img').filters.revealTrans){
Transition=6;
apply();
play();
}
}
if (firstTime){ firstTime=false;timeOut=_timeOut_/2;}
else{
f_img.src=imgUrl[now];
f_img.alt=imgAlt[now];
f_imgLink.href=imgLink[now];
f_text.innerHTML=imgText[now];
for (var i=0;i<count;i++) {eval('b'+i).className="button";}
eval('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();
}

try{  //ie版本
      new ActiveXObject("DXImageTransform.Microsoft.revealTrans");
  ver=1;
  }
catch (e){ver=2;}

//表现层 start
with(document){
write('<div id="f_div">');
write('<div id="f_imgDiv">');
    write('<a id="f_imgLink" target='+target+' href="'+imgLink[now]+'">');
write('<img id="f_img" width='+imgWidth+' height='+imgHeight+' src="'+imgUrl[now]+'" alt="'+imgAlt[now]+'">');
write('</a>');
write('</div>');
write('<div id="f_buttonDiv">');
write('<div id="button_bg">');
for (var i=count;i>0;i--){
    if(i==now+1){write('<a id="b'+(i-1)+'" class="on" href="javascript:b_change('+(i-1)+')" onfocus="blur()" title="'+imgAlt[(i-1)]+'">'+i+'</a>');}
else{write('<a id="b'+(i-1)+'" href="javascript:b_change('+(i-1)+')" onfocus="blur()"  title="'+imgAlt[(i-1)]+'">'+i+'</a>');}
}
write('</div>');
if (ver==1){write('<div id="f_line"></div>');}
write('</div>');
write('<div id="f_text">');
    write(imgText[now]);
write('</div>');
write('</div>');
}
//表现层 end
f_img.onmouseover=function(){window.clearInterval(theTimer);}
f_img.onmouseout=function(){theTimer=setTimeout("change()", timeOut2);}
var theTimer = setTimeout("change()", _timeOut_/2);
</script>

图片循环显示：
第一步:把如下代码加入<head>区域中:
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var interval = 2.5; // delay between rotating images (in seconds)
var random_display = 1; // 0 = no, 1 = yes
interval *= 1000;

var image_index = 0;
image_list = new Array();
image_list[image_index++] = new imageItem("01.jpg");
image_list[image_index++] = new imageItem("02.jpg");
image_list[image_index++] = new imageItem("03.jpg");
image_list[image_index++] = new imageItem("04.jpg");
var number_of_image = image_list.length;
function imageItem(image_location) {
this.image_item = new Image();
this.image_item.src = image_location;
}
function get_ImageItemLocation(imageObj) {
return(imageObj.image_item.src)
}
function generate(x, y) {
var range = y - x + 1;
return Math.floor(Math.random() * range) + x;
}
function getNextImage() {
if (random_display) {
image_index = generate(0, number_of_image-1);
}
else {
image_index = (image_index+1) % number_of_image;
}
var new_image = get_ImageItemLocation(image_list[image_index]);
return(new_image);
}
function rotateImage(place) {
var new_image = getNextImage();
document[place].src = new_image;
var recur_call = "rotateImage('"+place+"')";
setTimeout(recur_call, interval);
}
//  End -->
</script>





第二步:把<body>中加入如下代码：
<img name="rImage" src="01.jpg" width=120 height=90>



第三步：把<body>中内容改为：
<body bgcolor="#fef4d9" OnLoad="rotateImage('rImage')">

这样的问题还是发到新手讨论吧！

谢谢daoger

哦`
不好意思`才刚刚来JaveEye 所以还不知道一些行规