*************问个javascript问题*************

问个javascript问题

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

this.div.scrollLeft(this.div.scrollLeft()+1);
用firebug调试，提示this.div is undefined
因为setInterval调用this.scroll时,这个时候 this对象不再是你new 的那个对象,而是window
为什么会变成window呢？
那该怎么改呢？
function SlideBox() {
    this.tid;
    this.div = $("#scroll");
    this.ul = $("#scroll ul");
    this.firstli = $("#scroll ul:first");
    this.padWidth = 144;
    this.pauseTime = 1000;
    this.scrollTime = 1000;
}
SlideBox.prototype = {
    scroll: function () {
        var othis = this;
        this.div.scrollLeft(this.div.scrollLeft() + 1);
        if (this.div.scrollLeft() % this.padWidth == 0) {
            clearInterval(this.tid);
            this.ul.append("<li>" + this.firstli.html() + "</li>");
            this.firstli.remove();
            this.div.scrollLeft(0);
setTimeout(function(){
othis.start();
}, this.pauseTime);
        }
    },
    start: function () {
    var othis = this;
        this.tid = setInterval(function (){
             othis.scroll();
}, this.scrollTime);
    }
} //执行 var s = new SlideBox();
s.start();
不行喔，执行到setTimeout(function(){
            othis.start();
            }, this.pauseTime);
图片全部消失，而且直接卡死！
具体就不知道了哦,这个只是解决那个thid.div的问题.
图片消失可能是其他问题.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <style type="text/css">
        li{font-size: 12px;display: block;width: 120px;height: 172px;color: #2ea112;float: left;margin-right: 24px;}
    </style>
</head>
<body>
    <div id="scroll" style="padding-left: 0; margin-left: 20px; height: 170px; overflow: hidden;
        width: 900px; padding-top: 20px;">
        <ul style="width: 200%;" id="scrollUl">
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
        </ul>
    </div>
<script type="text/javascript">
function SlideBox(){
    this.tid;
    this.div=$("#scroll");
    this.ul=$("#scroll ul");
    this.firstli=$("#scroll ul:first");
    this.padWidth=144;
    this.pauseTime=1000;
    this.scrollTime=10;
}
SlideBox.prototype={
    scroll:function(){
        this.div.scrollLeft(this.div.scrollLeft()+1);
        if(this.div.scrollLeft()%this.padWidth==0){
            clearInterval(this.tid);
            this.ul.append("<li>"+this.firstli.html()+"</li>");
            this.firstli.remove();
            this.div.scrollLeft(0)
            setTimeout(this.start,this.pauseTime);
        }
    },
    start:function(){
        this.tid = setInterval(this.scroll, this.scrollTime);
    }
}
var s = new SlideBox();
s.start();
</script>
</body>
</html>
sorry 忘记说了
就是li图片向左滚动，当滚动条滚过第一张的时候
就把第一张append到ul的最后面，同时把第一张的li remove()掉
这样无限循环滚动！
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
    <script type="text/javascript" src="http://www.wanmei.com/public/js/jq_132.js"></script>
    <style type="text/css">
        li{font-size: 12px;display: block;width: 120px;height: 172px;color: #2ea112;float: left;margin-right: 24px;}
    </style>
</head>
<body>
    <div id="scroll" style="padding-left: 0; margin-left: 20px; height: 170px; overflow: hidden;
        width: 900px; padding-top: 20px;">
        <ul style="width: 200%;" id="scrollUl">
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
        </ul>
    </div>
<script type="text/javascript">
function SlideBox(){
    this.tid;
    this.div=$("#scroll");
    this.ul=$("#scroll ul");
    this.firstli=$("#scroll ul:first");
    this.padWidth=144;
    this.pauseTime=1000;
    this.scrollTime=10;
}
SlideBox.prototype={
    scroll:function(){
alert(this.div)
        this.div.scrollLeft(this.div.scrollLeft()+1);
        if(this.div.scrollLeft()%this.padWidth==0){
            clearInterval(this.tid);
            this.ul.append("<li>"+this.firstli.html()+"</li>");
            this.firstli.remove();
            this.div.scrollLeft(0)
            setTimeout(this.start,this.pauseTime);
        }
    },
    start:function(){
        this.tid = setInterval(this.scroll.call(this), this.scrollTime);
    }
}
var s = new SlideBox();
s.start();
</script>
</body>
</html>修改的这里
start:function(){
        this.tid = setInterval(this.scroll.call(this), this.scrollTime);
    }
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>
   <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
    <style type="text/css">
        li{font-size: 12px;display: block;width: 120px;height: 172px;color: #2ea112;float: left;margin-right: 24px;}
    </style>
</head>
<body>
    <div id="scroll" style="padding-left: 0; margin-left: 20px; height: 170px; overflow: hidden;
        width: 900px; padding-top: 20px;">
        <ul style="width: 200%;" id="scrollUl">
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
            <li><img src="aa.jpg" width="120px" height="142px" /></li>
        </ul>
    </div>
<script type="text/javascript">
function SlideBox(){
    this.tid;
    this.div=$("#scroll");
    this.ul=$("#scroll ul");
    this.firstli=$("#scroll ul li:first");
    this.padWidth=144;
    this.pauseTime=1000;
    this.scrollTime=10;
}
SlideBox.prototype={
    scroll:function(){
        this.div.scrollLeft(this.div.scrollLeft()+1);
        if(this.div.scrollLeft()%this.padWidth==0){
            clearInterval(this.tid);
            this.ul.append("<li>"+this.firstli.html()+"</li>");
            this.firstli.remove();
            this.div.scrollLeft(0)
            setTimeout(function(){var o = this;return function(){o.start()}}.call(this),this.pauseTime);
        }
    },
    start:function(){
        this.tid = setInterval(function(){var o = this;return function(){o.scroll()}}.call(this), this.scrollTime);
    }
}
var s = new SlideBox();
s.start();
</script>
</body>
</html>
修正你程序的错误，但是你这个滚动思路不好把移出外面的一个div放到最后面，这样比较浪费效率你去网上找个好的吧。很多的
感谢两位大牛MuBeiBei，aspwebchh，可以了。
大牛就是不一样，我搞了一下午都没搞定，
可以帮忙讲解下吗？如果不知道原理的话心理会有个疙瘩比如说这里
start:function(){
        this.tid = setInterval(this.scroll, this.scrollTime);
    }
//当执行setInterval(this.scroll, this.scrollTime);它是把this指向window吗？为什么呢？start:function(){
        this.tid = setInterval(function(){var o = this;return function(){o.scroll()}}.call(this), this.scrollTime);
//这个var o=this;this这里指的是SlideBox吗？
//那function(){o.scroll()}}.call(this)意思是用slidebox的scroll()方法替换this，这里的this又是指哪呢？
    }
我晕了，还是搞不明白，可否讲解下！
start:function(){
        this.tid = setInterval(this.scroll, this.scrollTime);
    }
//当执行setInterval(this.scroll, this.scrollTime);它是把this指向window吗？为什么呢？恩，当执行setInterval的时候作用域就改变了，变成了window
所以当调用this.scroll的时候后面加个.call(this)，让它能找到当前作用域
setInterval(this.scroll.call(this), this.scrollTime);
function SlideBox(){
    this.tid;
    this.div=$("#scroll");
    this.ul=$("#scroll ul");
    this.firstli=$("#scroll ul li:first");//获得第一个li，你当初写的时候是获得ul
    this.padWidth=144;
    this.pauseTime=1000;
    this.scrollTime=10;
}
SlideBox.prototype={
    scroll:function(){
        this.div.scrollLeft(this.div.scrollLeft()+1);
        if(this.div.scrollLeft()%this.padWidth==0){
            clearInterval(this.tid);
            this.ul.append("<li>"+this.firstli.html()+"</li>");
            this.firstli.remove();
            this.div.scrollLeft(0)
            setTimeout(function(){var o = this;return function(){o.start()}}.call(this),this.pauseTime);//跟下面同个道理
        }
    },
    start:function(){
        this.tid = setInterval(function(){var o = this;return function(){o.scroll()}}.call(this), this.scrollTime);//你直接把这个函数传给setInterval，那这个当成参数的函数的this,指向的就是window对象，并不是你创建的那个对象，所以会出错，因为window并没有div这个属性，所以会报undefined错误，必须改变函数的调用对象，也就是在函数内部的this.
    }
}
var s = new SlideBox();
s.start();
谢谢两位大牛的讲解，让我明白了些
是不是这样的
因为setInterval是属于window对象的，当调用的时候setInterval的时候就会把this指向window
而当使用xxx.call(this)的时候，是把xxx放到this中执行,this这时是SlideBox，所以会指向为SlideBox
是这样吗？
嗯嗯，可以先这么理解。
你想想你调用setInterval方法的时候，是不是也可以写成window.setInterval()。
就是这个意思
window.setInterval = function(fun)
{
    fun()//弹出的对象其实是window对象
}function x()
{

}
x.prototype.y = function()
{
  alert(this)//这里是你本来想弹出对象，就是你创建的那个
}var o = new x()
window.setInterval(o.y);
谢谢喔，不过我把这两句改成你说的那样。不行喔。换成aspwebchh那个可以。
start:function(){
  this.tid = setInterval(this.scroll.call(this), this.scrollTime);
  }
setTimeout(this.start.call(this),this.pauseTime);
呃~·我以为你就要拿到this.div呢为什么老是提示this.div is undefined？我都有设置this.div=$("#scroll");
是什么原因呢？
setInterval的一般用法是传个函数给他，好比c#的中委托。
this.start.call(this) 这个写法，你在调用 setInterval的时候，直接执行了这个start函数，好比这样 this.start()，call加不加都无所谓的。这里一般的用法是，执行这个函数，返回一个函数（当成setInterval的参数），在这个返回的函数中去执行这个 this.start函数，那这个调用对象就变回来了
我爱你，太棒了，这样更直观明白了。
不过我又被绕回来了
this.tid = setInterval(function(){var o = this;return function(){o.scroll()}}.call(this), this.scrollTime);这样是把function(){o.scroll()}}方法放到
window.setInterval = function(fun)
{
    fun()//弹出的对象其实是window对象
}
中执行。那这样怎么可以得到this.div那些对象呢？
谢谢你香肠嘴，以及上面的朋友们
终于理解了，唉不容易
//发现这种更好理解点
        var othis = this;
        this.tid = setInterval(function (){
             othis.scroll();
        }, this.scrollTime);//香肠嘴给的那个方法也终于理解了
this.tid = setInterval(function(){
                    var o=this;
                    return function(){
                        o.scroll()
                    }
            }.call(this), this.scrollTime);
setInterval接收一个匿名函数，
return function(o.scroll())执行scroll方法以及返回一个函数
xx.call(this)//这里接相当于上面说的this.scroll.call(this)=this.scroll()直接执行
function SlideBox(instance){
    this.tid;
    this.div=$("#scroll");
    this.ul=$("#scroll ul");
    this.firstli=$("#scroll ul:first");
    this.padWidth=144;
    this.pauseTime=1000;
    this.scrollTime=1000;
this.instance=instance;
this.start();
}
SlideBox.prototype={
    scroll:function(){
        this.div.scrollLeft(this.div.scrollLeft()+1);
        if(this.div.scrollLeft()%this.padWidth==0){
            clearInterval(this.tid);
            this.ul.append("<li>"+this.firstli.html()+"</li>");
            this.firstli.remove();
            this.div.scrollLeft(0)
            setTimeout(this.instance+".start",this.pauseTime);
        }
    },
    start:function(){
        this.tid=setInterval(this.instance+".scroll",this.scrollTime);
    }
}//执行
                var s = new SlideBox(“s”);
这个还是用Java里面对this的认识，来代替JavaScript中的this，这两者差距很大，到网上搜搜相关资料，好好学习