一个图片切换的JS ，谁帮忙看看

Question

<style type="text/css">
#focus_change{width:339px;height:239px;position:relative;overflow:hidden;font-family:Verdana, Arial, Helvetica, sans-serif;background:#fff;}
#loading{position:absolute;z-index:9999;width:339px;height:239px;background:#fff url(/jscss/demoimg/loading.gif) center -40px no-repeat;color:#666;font-size:12px;text-align:center;padding-top:90px;}
#ts_bg{position:absolute;bottom:0;z-index:1;width:339px;height:36px;background:#000;filter:alpha(opacity=40);opacity:0.4;}
#pics li{position:absolute;top:0px;left:0px;}
#pics li img{filter:alpha(opacity=0);opacity:0;width:339px;height:239px;}/*图片大小与框架保持一致*/
#ts li{position:absolute;z-index:2;left:0;bottom:-32px;height:24px;line-height:24px;font-size:14px;font-weight:bold;padding-left:16px;}
#ts li a{color:#fff; text-decoration:none;}/*标题链接样式*/
#btn,#btn_bg{position:absolute;z-index:3;bottom:8px;right:8px;color:#fff;font-size:12px;}
#btn li,#btn_bg li{float:left;width:22px;height:18px;line-height:18px;overflow:hidden;text-align:center;margin-right:1px;}
#btn_bg li{background:#fff;filter:alpha(opacity=50);opacity:0.5;}
#btn li.current {background:#F60;}
    </style><script type="text/javascript">
function $(id) {return document.getElementById(id);}
function $$(tag,id){return (id==undefined?document:this.$(id)).getElementsByTagName(tag);}
function poptit(tsID,n){//文字上下运动函数
var ts = $$('li',tsID);
var setway=function(obj,y){obj.style.bottom=y+'px';}
var getway=function(obj){return parseInt(obj.style.bottom);}
var up=function(){
if (ts[n].movement) clearTimeout(ts[n].movement);//为了兼容变化中的点击
if (y1 == 0) return true;
y1+=Math.ceil((0 - y1) / 5);
setway(ts[n],y1);
if(y1<0) ts[n].movement = setTimeout(up, 1);
}
var down=function(){
if (ts[N].movement) clearTimeout(ts[N].movement);
if (y2 == -32) return true;
y2+=Math.floor((-32 - y2) / 5);
setway(ts[N],y2);
if(y2>-32) ts[N].movement = setTimeout(down, 1);
}
for(var i=0;i<ts.length;i++){
if (!ts[i].style.bottom) ts[i].style.bottom = "-32px";
if(ts[i].name=='up') var N=i;
}
if(!N&&n==0) {//开始载入...
ts[n].name='up';
var y1=getway(ts[n]);
up();
return true;
} 
if(N==n) return true;//防止快速移出移入的抖动
ts[N].name=''//标记淡入的name为空
ts[n].name='up';
var y1=getway(ts[n]);
var y2=getway(ts[N]);
down();
up();
}
function opa(pics,n){//图片淡入淡出函数
var pics = $$('img',pics);
var setfade=function(obj,o){
if (document.all) obj.style.filter = "alpha(opacity=" + o + ")";
else obj.style.opacity = (o / 100);
};
var getfade=function(obj){
return (document.all)?((obj.filters.alpha.opacity)?obj.filters.alpha.opacity:false):((obj.style.opacity)?obj.style.opacity*100:false);
}
var show=function(){
if(pics[n].move) clearTimeout(pics[n].move);
if (o1 == 100) return true;
o1+=5;
setfade(pics[n],o1);
if(o1<100) pics[n].move=setTimeout(show,1);
};
var hide=function(){
if(pics[N].move) clearTimeout(pics[N].move);
if (o2 == 0) return true;
o2-=5;
setfade(pics[N],o2);
if(o2>0) pics[N].move=setTimeout(hide,1);
};
for(var i=0;i<pics.length;i++){
if(!getfade(pics[i])) setfade(pics[i],0);
if(pics[i].name=='out') var N=i;
}
if(!N&&n==0) {//开始载入...
pics[n].name='out';
var o1=getfade(pics[n]);
show();
return true;
}
if(N==n) return true;
pics[N].name=''
pics[n].name='out';
var o1=getfade(pics[n]);
var o2=getfade(pics[N]);
hide();
show();
}
function classNormal() {//数字标签样式清除
    var focusBtnList = $$('li','btn');
    for (var i = 0; i < focusBtnList.length; i++) {
        focusBtnList[i].className = '';
    }
}
function autoFocusChange() {//自动运行
    if (atuokey) return;
    var focusBtnList = $$('li','btn');
    for (var i = 0; i < focusBtnList.length; i++) {
        if (focusBtnList[i].className == 'current') {
            var currentNum = i;
        }
    }
if(currentNum<focusBtnList.length-1){
poptit('ts',currentNum+1);
opa('pics',currentNum+1);
        classNormal();
        focusBtnList[currentNum+1].className = 'current';
}else if(currentNum==focusBtnList.length-1){
poptit('ts',0);
opa('pics',0);
        classNormal();
        focusBtnList[0].className = 'current';
}
}
function focusChange() {//交互切换
    var focusBtnList = $$('li','btn');
    for (var i = 0; i < focusBtnList.length; i++) {
focusBtnList[i].I=i;
focusBtnList[i].onclick = function(){
         poptit('ts',this.I);
opa('pics',this.I);
         classNormal();
         focusBtnList[this.I].className = 'current';
}
focusBtnList[i].onmouseover = function(){
this.style.backgroundColor='#f60';
this.style.cursor='pointer';
}
focusBtnList[i].onmouseout = function(){
this.style.backgroundColor='';
}
}
}
var atuokey = '';
function init(){//初始化
$('btn_bg').innerHTML=$('btn').innerHTML;
$('focus_change').removeChild($$('div','focus_change')[0]);
poptit('ts',0);
opa('pics',0);
    classNormal();
    $$('li','btn')[0].className = 'current';
$('focus_change').onmouseover = function() {
        atuokey = true;
clearInterval(auto);
    }
    $('focus_change').onmouseout = function() {
        atuokey = false;
auto=setInterval('autoFocusChange()', T);
    }
}
var T=3000;//每帧图片停留的时间，1000=1秒
var auto='';
window.onload=function(){
init();
focusChange();
auto=setInterval('autoFocusChange()', T);
}
</script><div id="focus_change">
<div id="loading">加載中...</div>
<div id="ts_bg">文字标题的背景</div>
<div id="btn_bg">数字标签的背景</div>
<div id="pics">
<ul>
        <li><a href="#"><img src="images/20100202_1.jpg" border=0 alt="^_^" /></a></li>
        <li><a href="#"><img src="images/20090804_4.JPG" border=0 alt="^_^" /></a></li>
        <li><a href="#"><img src="images/20100316_2.jpg" border=0 alt="^_^" /></a></li>
        <li><a href="#"><img src="images/20090907_01A.jpg" border=0 alt="^_^" /></a></li>
    </ul>
</div>
<div id="ts">
<ul>
        <li><a href="#">圖片一</a></li>
        <li><a href="#">圖片二</a></li>
        <li><a href="#">圖片三</a></li>
        <li><a href="#">圖片四</a></li>
    </ul>
</div>
<div id="btn">
<ul>
     <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
</div>一。为什么我在红色的那一段给每个图片加上链接后， 我点图片的时候，不管点哪一张，链接的都是最后一张......二.可以吧这个搞成从数据库里读取图片路径的吗？  好更换啊

Answer 1

这个是循环赋值，都被最后一个覆盖了，把赋值的那段代码从新整一个function gg(i){};
再把“i”传到该函数中进行赋值....

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=utf-8" />
<title>Javascript图片幻灯效果-www.codefans.net</title>
<style type="text/css" media="all">
.d1{width:443px;height:auto;overflow:hidden;border:#666666 2px solid;background-color:#000000;position:relative;}
.loading{width:443px;border:#666666 2px solid;background-color:#000000;color:#FFCC00;font-size:12px;height:179px;text-align:center;padding-top:30px;font-family:Verdana, Arial, Helvetica, sans-serif;font-weight:bold;}
.d2{width:100%;height:209px;overflow:hidden;}
.num_list{position:absolute;width:100%;left:0px;bottom:-1px;background-color:#000000;color:#FFFFFF;font-size:12px;padding:4px 0px;height:20px;overflow:hidden;}
.num_list span{display:inline-block;height:16px;padding-left:6px;}
img{border:0px;}
ul{display:none;}
.button{position:absolute; z-index:1000; right:0px; bottom:2px; font-size:13px; font-weight:bold; font-family:Arial, Helvetica, sans-serif;}
.b1,.b2{background-color:#666666;display:block;float:left;padding:2px 6px;margin-right:3px;color:#FFFFFF;text-decoration:none;cursor:pointer;}
.b2{color:#FFCC33;background-color:#FF6633;}
</style>
<script language="javascript" type="text/javascript">
/*
by: /
*/
//主函数
var s=function(){
var interv=2000; //切换时间
var interv2=10; //切换速速
var opac1=80; //文字背景的透明度
var source="fade_focus" //图片容器的id名称
//获取对象
function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}}
function getid(id){return document.getElementById(id)};
var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);}
//控制图层透明度
function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}}
//控制焦点按钮
function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";}
title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button);
//渐显
var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};}
//渐隐
var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};}
//滚动文字
var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0&&t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0&&t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}};
fadeon();
}
//初始化
window.onload=s;
</script></head><body>
<div id="fade_focus">
    <div class="loading">Loading...<br /><img src="/jscss/demoimg/200905/logings.gif" width="100" height="100" /></div>
    <ul>
      <li><img src="/jscss/demoimg/wall1.jpg" width="443" height="209" alt="展示图片1" /></li>
      <li><img src="/jscss/demoimg/wall2.jpg" width="443" height="209" alt="展示图片2" /></li>
      <li><img src="/jscss/demoimg/wall3.jpg" width="443" height="209" alt="展示图片3" /></li>
      <li><img src="/jscss/demoimg/wall4.jpg" width="443" height="209" alt="展示图片4" /></li>
    </ul>
</div>
</body>
</html>

Answer 3

#pics li{position:absolute;top:0px;left:0px;}
#pics li img{filter:alpha(opacity=0);opacity:0;width:339px;height:239px;}/*图片大小与框架保持一致*/
你的几个LI和LI里的图片，都撂在一起了。最后一个显示在最上面。切换显示时只是利用透明度，而并非真正的隐藏对象。所以每次点击都点击到最后一个LI上，于是转向最后的URL。正确的方法是在调整滤镜透明度的前后，对LI设置其可见性属性。具体来说，就是在show()前把要显示的LI的透明度属性设0，把display属性设为block。然后在hide()前把要隐藏的LI可见度设为100。然后在hide()里：if (o2 == 0) {处理的LI对象.style.display="none";return true;}，即当图片完全透明就隐藏起来。
这样就可以了。