仿淘宝首页图片切换，出现的问题。。大家赐教

水平有限，调试了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>new TAb</title>
<style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
ul, ol { list-style:none; }
#main-promo { float:left; border:1px solid #b6d1e6; overflow:hidden; margin-bottom:0; }
#main-promo .loading { background:url(http://img07.taobaocdn.com/tps/i7/T16WJqXaXeXXXXXXXX-32-32.gif) no-repeat 50% 50% #ebf5fa; }
.tb-slide-list li { width:470px; height:150px; overflow:hidden; float:left }
.tb-slide { position:relative; width:470px; height:150px; overflow:hidden; }
.tb-slide .tb-slide-list { *font-size:0;
}
.tb-slide-triggers { position:absolute; right:5px; bottom:5px; height:18px; padding-top:2px; z-index:10; }
.tb-slide-triggers li { float:left; width:16px; height:16px; background-position:-131px -114px; background-color:#fcf2cf; border:1px solid #f47500; color:#d94b01; text-align:center; line-height:16px; margin-left:3px; cursor:pointer; font-size:11px; }
.tb-slide-triggers .current { width:18px; height:18px; line-height:18px; background-position:-113px -114px; background-color:#ff9415; margin-top:-2px; color:#fff; font-weight:bold; }
</style>
</head><body id="body"><div class="box box-skin-naked" id="main-promo">
    <div class="bd">
        <div class="slide-player tb-slide loading" id="J_Slide" style="position: relative;">
            <ol class="tb-slide-list" id="Olwrap" style="position:absolute; top:0px; left:0; width:2350px; background:#fff">
<li id="pic1">
<img width="470" height="150" src="http://img08.taobaocdn.com/tps/i8/T1MDxtXnBkXXXXXXXX-470-150.png"/>
</li>
<li class="J_ECPM" id="pic2">
<img width="470" height="150" src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-09/100209165110.jpg"/>
</li>
                <li class="J_ECPM" id="pic3">
<img width="470" height="150" src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-25/100225114448.gif"/>
</li>
                <li class="J_ECPM" id="pic4">
<img width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-24/100224095344.gif"/>
</li>
<li id="pic5">
<img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-09/100209165110.jpg"  width="470" height="150" />
</li>
            </ol>
<ul class="tb-slide-triggers" id="tb">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
    </div>
</div><script type="text/javascript">
var $ = function(id){ return document.getElementById(id)}
function init(parameter){
var Width=parameter.Width,objID =parameter.objID,tabName =parameter.tabName,time =1000*parameter.time,index = 0; var aLi = $("tb").getElementsByTagName("li"),len =aLi.length;
for(var i = 0; i<len; i++){
aLi[i].onclick = fnActive(i);
} function fnActive(num){
function callback(){
if(myTime){
clearInterval(myTime);
}
for(var i = 0; i<len; i++){
aLi[i].className = "";
}
this.className = tabName;
var finWidth = num*Width;
flash(objID,finWidth);
index = num;
myTime = setInterval("play()",time);
}
return callback;
} function flash(objID,finWidth){
var o = $(objID);
var xPos = parseInt(o.style.left);
if((xPos == finWidth)||o.interVal){
clearTimeout(o.interVal);
}
if(xPos > finWidth){
xPos -= Math.ceil((xPos - finWidth)/5);
}
if(xPos < finWidth){
xPos += Math.ceil((finWidth - xPos)/5);
}
o.style.left = xPos + "px";
o.interVal = setTimeout("flash('" + objID + "'," + finWidth + ")" , 10 );
} function play(){
for(var i=0; i<len; i++){
aLi[i].className = "";
}
aLi[index].className = tabName;
var finWidth = (index)*Width;
flash(objID,finWidth);
index++;
if(index == len){
index = 0;
}
}

var myTime = setInterval("play()",time);

}init({
Width:-470,
objID:"Olwrap",
tabName:"current",
time:5
});</script>
</body>
</html>

解决方案 »

  1.   

    <!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>new TAb</title>
    <style>
    body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
    ul, ol { list-style:none; }
    #main-promo { float:left; border:1px solid #b6d1e6; overflow:hidden; margin-bottom:0; }
    #main-promo .loading { background:url(http://img07.taobaocdn.com/tps/i7/T16WJqXaXeXXXXXXXX-32-32.gif) no-repeat 50% 50% #ebf5fa; }
    .tb-slide-list li { width:470px; height:150px; overflow:hidden; float:left }
    .tb-slide { position:relative; width:470px; height:150px; overflow:hidden; }
    .tb-slide .tb-slide-list { *font-size:0;
    }
    .tb-slide-triggers { position:absolute; right:5px; bottom:5px; height:18px; padding-top:2px; z-index:10; }
    .tb-slide-triggers li { float:left; width:16px; height:16px; background-position:-131px -114px; background-color:#fcf2cf; border:1px solid #f47500; color:#d94b01; text-align:center; line-height:16px; margin-left:3px; cursor:pointer; font-size:11px; }
    .tb-slide-triggers .current { width:18px; height:18px; line-height:18px; background-position:-113px -114px; background-color:#ff9415; margin-top:-2px; color:#fff; font-weight:bold; }
    </style>
    </head><body id="body"><div class="box box-skin-naked" id="main-promo">
        <div class="bd">
            <div class="slide-player tb-slide loading" id="J_Slide" style="position: relative;">
                <ol class="tb-slide-list" id="Olwrap" style="position:absolute; top:0px; left:0; width:2350px; background:#fff">
                    <li id="pic1">
                        <img width="470" height="150" src="http://img08.taobaocdn.com/tps/i8/T1MDxtXnBkXXXXXXXX-470-150.png"/>
                    </li>
                    <li class="J_ECPM" id="pic2">
                        <img width="470" height="150" src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-09/100209165110.jpg"/>
                    </li>
                    <li class="J_ECPM" id="pic3">
                        <img width="470" height="150" src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-25/100225114448.gif"/>
                    </li>
                    <li class="J_ECPM" id="pic4">
                        <img width="470" height="150" border="0" src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-24/100224095344.gif"/>
                    </li>
                    <li id="pic5">
                        <img src="http://img.alimama.cn/bcrm/adboard/picture/2010-02-09/100209165110.jpg"  width="470" height="150" />
                    </li>
                </ol>
                <ul class="tb-slide-triggers" id="tb">
                    <li class="current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                </ul>
            </div>
        </div>
    </div><script type="text/javascript">
    var $ = function(id){ return document.getElementById(id)}
    function init(parameter){
        var Width=parameter.Width,objID =parameter.objID,tabName =parameter.tabName,time =1000*parameter.time,index = 0;    var aLi = $("tb").getElementsByTagName("li"),len =aLi.length;
        for(var i = 0; i<len; i++){
            aLi[i].onclick = fnActive(i);
        }    function fnActive(num){
            function callback(){
                if(myTime){
                    clearInterval(myTime);    
                }    
                for(var i = 0; i<len; i++){
                    aLi[i].className = "";
                }        
                this.className = tabName;
                var finWidth = num*Width;
                flash(objID,finWidth);
                index = num;
                myTime = setInterval(function() { play() } ,time);
            }
            return callback;
        }    function flash(objID,finWidth){
            var o = $(objID);
            var xPos = parseInt(o.style.left);
            if((xPos == finWidth)||o.interVal){
                clearTimeout(o.interVal);
            }
            if(xPos > finWidth){
                xPos -= Math.ceil((xPos - finWidth)/5);
            }
            if(xPos < finWidth){
                xPos += Math.ceil((finWidth - xPos)/5);
            }
            o.style.left = xPos + "px";
            o.interVal = setTimeout(function() { flash(objID, finWidth)}, 10);
        }    function play(){
            for(var i=0; i<len; i++){
                aLi[i].className = "";
            }
            aLi[index].className = tabName;
            var finWidth = (index)*Width;
            flash(objID,finWidth);
            index++;
            if(index == len){
                index = 0;
            }
        }
        var myTime = setInterval(function() {play()},time);
        
    }init({
        Width:-470,
        objID:"Olwrap",
        tabName:"current",
        time:2
    });</script>
    </body>
    </html>
      

  2.   

    //var myTime = setInterval("play()",time);//这种写法play必须是全局变量才行
    可以直接写成
    var myTime=setInterval(paly,time)
      

  3.   

    谢谢 s_liangchao1s ，
    能告诉我，加匿名函数的原因不？因为play()，和 flash(）本身就是函数