大侠看看为什么有错呢

代码贴出来了
提示没有animate函数
<!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>Untitled Document</title>
<style type="text/css">
body { margin:0; padding:0; }
ul { margin:0; padding:0; }
ul { list-style:none; }
ul li { float:left; }
</style>
</head><body>
<ul id="ulId">
<li><a href="#"><img src="1.jpg" width="100" /></a></li>
    <li><a href="#"><img src="2.gif" width="100" /></a></li>
    <li><a href="#"><img src="3.gif" width="100" /></a></li>
    <li><a href="#"><img src="4.gif" width="100" /></a></li>
    <li><a href="#"><img src="5.jpg" width="100" /></a></li>
</ul>
<script type="text/javascript">var scrolls = function() {
var arr = ["1.jpg", "2.gif", "3.gif", "4.gif", "5.jpg"];

function animate(flag) {
if(flag) {
arr.push(arr.shift());
var lis = document.getElementById("ulId").getElementsByTagName("li");
for(var i=0; i<lis.length; i++) {
lis[i].getElementsByTagName("img")[0].src = arr[i];
}
} else {
arr.unshift(arr.pop());
var lis = document.getElementById("ulId").getElementsByTagName("li");
for(var i=0; i<lis.length; i++) {
lis[i].getElementsByTagName("img")[0].src = arr[i];
}
}

}

return {
scrollLeft: function(args) {
t = setInterval("animate(args)", 1000);
}
};
}();scrolls.scrollLeft(true);
</script>
</body>
</html>

解决方案 »

  1.   

    t = setInterval("animate(args)", 1000);
    这的问题吧，参数没有传进去
      

  2.   

    简单改了改，不知道会破坏了本意function animate(flag) {
    var arr = ["1.jpg", "2.gif", "3.gif", "4.gif", "5.jpg"];
    if(flag) {
    arr.push(arr.shift());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    } else {
    arr.unshift(arr.pop());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    }}
    var scrolls = function() {
    return {
    scrollLeft: function(args) {
    t = setInterval("animate('args')", 1000);
    }
    };
    }();scrolls.scrollLeft(true);
      

  3.   

    你那样写animate是局部函数， return之后就销毁了，在全局找不到。
      

  4.   

    技术未到就不要用这么复杂的写法嘛<script type="text/javascript">var scrolls = (function() {
    var arr = ["1.jpg", "2.gif", "3.gif", "4.gif", "5.jpg"];function animate(flag) {
    if(flag) {
    arr.push(arr.shift());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    } else {
    arr.unshift(arr.pop());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    }}return {
    scrollLeft: function(args) {
    t = setInterval("animate(args)", 1000);
    }
    };
    })();scrolls.scrollLeft(true);
    </script>
      

  5.   

    我最后做成的是这样的，那位大侠可以优化下，去掉过多的全局变量
    <!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>Untitled Document</title>
    <style type="text/css">
    body { margin:0; padding:0; }
    ul { margin:0 auto; padding:0; width:500px; position:relative; }
    ul { list-style:none; }
    ul li { float:left; }
    #left { width:10px; height:10px; background:#f00; position:absolute; left:-10px; top:13px; }
    #right { width:10px; height:10px; background:#f00; position:absolute; right:-10px; top:13px; }
    </style>
    </head><body>
    <ul id="ulId">
    <li><a href="#"><img src="1.jpg" width="100" /></a></li>
        <li><a href="#"><img src="2.gif" width="100" /></a></li>
        <li><a href="#"><img src="3.gif" width="100" /></a></li>
        <li><a href="#"><img src="4.gif" width="100" /></a></li>
        <li><a href="#"><img src="5.jpg" width="100" /></a></li>
        <div id="left"></div>
        <div id="right"></div>
    </ul>
    <script type="text/javascript">
    var arr = ["1.jpg", "2.gif", "3.gif", "4.gif", "5.jpg"];
    var flag = true;
    var timerLeft = null;
    var timerRight = null;
    function animate() {
    if(flag) {
    arr.push(arr.shift());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    } else {
    arr.unshift(arr.pop());
    var lis = document.getElementById("ulId").getElementsByTagName("li");
    for(var i=0; i<lis.length; i++) {
    lis[i].getElementsByTagName("img")[0].src = arr[i];
    }
    }

    }
    var scrolls = {
    scrollLeft: function() {
    clearInterval(timerLeft);
    clearInterval(timerRight);
    timerLeft = setInterval("animate()", 1000);
    },

    scrollRight: function() {
    flag = false;
    clearInterval(timerLeft);
    clearInterval(timerRight);
    timerRight = setInterval("animate()", 1000);
    }
    };
    document.getElementById("left").onclick = function(e) {
    e = e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    } else {
    e.returnValue = false;
    }
    clearInterval(timerLeft);
    clearInterval(timerRight);
    scrolls.scrollLeft();
    }
    document.getElementById("right").onclick = function(e) {
    e = e || window.event;
    if(e.preventDefault) {
    e.preventDefault();
    } else {
    e.returnValue = false;
    }
    clearInterval(timerLeft);
    clearInterval(timerRight);
    scrolls.scrollRight();
    }
    //scrolls.scrollLeft();
    </script>
    </body>
    </html>