请高手看看js代码问题，不长。并且带有思路。

Question

本帖最后由 yeeege 于 2010-09-13 16:31:44 编辑

Answer 1

我是把html，css贴出来的，方便测试和理解嘛重点还是js上耐心看看，帮帮忙啊

Answer 2

this.currentW+=tempspace //记录在一次翻页内，已经移动了的宽度
if(this.currentW<this.pageWidth){// 如果已经移动的宽度小于翻页，说明翻页还没有完成
setTimeout(this.timeScrPicLeft(), this.speed) //循环执行该函数
//这里参数传递有错误呢
}

Answer 3

感觉是语法错误因为太奇怪了把autoPlayPic里的
this.autoPlayObj = setInterval(this.picLeftGo(), this.intervalTime) //设置或重新设置interva
改成
his.autoPlayObj = setInterval(this.picLeftGo, this.intervalTime) //设置或重新设置interval再看

Answer 4

同理  setTimeout里第一个参数后面把括号去掉

Answer 5

var $ = function(id) {
    return "string" == typeof id ? document.getElementById(id) : id
}
function simplePicScroll() {
    this.speed = 30; //速度(毫秒)
    this.space = 20; //每次移动(px)
    this.pageWidth = 166; //翻页宽度,它与内部的一个TD的宽度一致，其计算由img宽度，img的margin,padding,border等实际站位宽度得出
    this.intervalTime = 2500; //每次动作的间隔时间
    this.autoPlayObj = null //实现自动移动
    this.imgContWidth = 0 //整个可移动图片容器的宽度，包括了被隐藏的部分
    this.isAutoPic = true //是否启动自动移动，默认是
    this.scrollLock = true //是否移动
    this.currentW = 0 //当前已经左移的宽度
}
simplePicScroll.prototype.init = function() { //入口的函数
    this.imgContWidth = $("picNewsCont").offsetWidth
    if (this.imgContWidth <= $("scrollPicNewsContent").offsetWidth) { //判断整个图片的宽度是否小于图片容器的宽度
        this.isAutoPic = false //如果是，则图片不需要移动，因为容器能容纳下它们
    } else {
        $("picNewsTd2").innerHTML = $("picNewsTd1").innerHTML //否则，将图片宽度以复制一组图片的方式，增加一倍宽度
    }
    var _this=this;
    $("picNewsContainer").onmouseover = function() {
        _this.scrollLock = false;
        clearInterval(_this.autoPlayObj)
    }
    $("picNewsContainer").onmouseout = function() {
        _this.scrollLock = true;
        _this.autoPlayPic()
    }
    this.autoPlayPic() //自动运行。---------就是这里，它报错：但是第一次滚动，它通过了，第二次开始，这里并不需要运行了，但却报错。想不通
}
simplePicScroll.prototype.autoPlayPic = function() { //自动运行函数
    if (this.isAutoPic) {
        clearInterval(this.autoPlayObj) //首先去掉interval的等待
        this.autoPlayObj = setInterval(this.picLeftGo(), this.intervalTime) //设置或重新设置interval
    }
}
simplePicScroll.prototype.picLeftGo = function() { //图片移动的实际执行函数
    clearInterval(this.autoPlayObj) this.examBorder() //检查边缘是否对齐
    if (this.scrollLock) {
        this.timeScrPicLeft()
    } //进入图片移动的物理处理
    this.autoPlayPic() //再次进入interval，并等待一段时间
}
simplePicScroll.prototype.picLeftStop = function() {
    this.moveLock = false clearInterval(this.autoPlayObj) this.examBorder() this.scrollLock = false
}
simplePicScroll.prototype.examBorder = function() { //检查边缘，使其正常循环，或者使其边缘按pagewidth的n倍对齐
    with($("scrollPicNewsContent")) {
        scrollLeft = scrollLeft < this.imgContWidth ? scrollLeft: 0 scrollLeft -= scrollLeft % this.pageWidth == 0 ? 0 : scrollLeft % this.pageWidth
    }
}
simplePicScroll.prototype.timeScrPicLeft = function() { //这个函数说明图片是怎么移动的
    var perWidth, tempspace, tempMoreW tempMoreW = 0 //因为在speed内，移动的像素是不固定的，所以用它来表示 每次超过了翻页宽度的长度
    perWidth = $("scrollPicNewsContent").scrollLeft % this.pageWidth //下次移动多宽
    tempspace = Math.round((perWidth + 1) * 0.2 + 1) //重新计算下次移动多宽，使得 每次移动的宽度渐增
    $("scrollPicNewsContent").scrollLeft += tempspace //使整个图片的table向左移动tempspace
    this.currentW += tempspace //记录在一次翻页内，已经移动了的宽度
    if (this.currentW < this.pageWidth) {如果已经移动的宽度小于翻页，说明翻页还没有完成setTimeout(this.timeScrPicLeft(), this.speed) //循环执行该函数
    } else { //如果翻页完成了-----注意，它这里也报错误，莫名其妙的
        tempMoreW = this.currentW - this.pageWidth //计算实际移动的宽度是否大于了翻页宽度
        if (tempMoreW > 0) { //是
            $("scrollPicNewsContent").scrollLeft -= tempMoreW //是的话，将多翻页的宽度退回来
            tempMoreW = 0
        }
        this.currentW = 0
        return true
    }
} 改了一个，你先看看，你没搞清this是怎么用的
ps：插入代码请使用
或者，如果之前都没有格式 ，这里有格式化工具http://www.uedsky.com/sky/tool/javascript-html-formater-compressor.html

Answer 6

setInterval(this.picLeftGo, this.intervalTime)
这样的话，picLeftGo,就不会执行了。我试过的。我还用这几种方式试过的，同样对setTimeout
setInterval(funtion(){this.picLeftGo()},this.intervalTime),这个和我正文提到的效果一样setIntervale('this.picLeftGo()', this.intervalTime)，本来这个在以前的写法中'picLeftGo()',还是很好的执行的。但是加了this就不行了，不认它

Answer 7

后面一个错误，如果是if里面的话，直接去年setTimeout里方法括号试试
setTimeout(this.timeScrPicLeft,....)

Answer 8

谢谢你！
我那样写的this就成了$("....")的引用了，嗯，记住了，以后不会在犯这种低级错误了。后面那个错误，去掉括号就很多错误了，最明显的就是stack overflow。而且连第一次翻页都不能运行！说明（）不是问题所在？！
我再好好想想，改改，试试

Answer 9

var _this=this;
这种错误确实要注意了，我晕！我突然发现我也有这样的错误了！哎学习了！

Answer 10

呵呵
var .. = this
这样的写法，我看见很多的
不知道到我自己写的时候，就不知道这样用了，
唉，真郁闷

Answer 11

是不是问题所在我不知道，但是不去掉，()表示立即执行，setTimeout也就没用了

Answer 12

你说的太对了！！
以前是setTimeout('timeScrPicLeft()',..),现在加了this，就不能那么写了
同时，
虽然还是运行了一次翻页。但是，正如你所说的，加()后，setTimeout(this.tim..(),..)的效果，其实就是timeScrPicLeft()的执行，所以，现在的第一次翻页，没有timeout的效果。 同时，也因为这样，一直在在执行timeScrPicLeft()函数，所以就stack overflow了
这确实是问题所在而且，this.timeScrPicLeft()在这个函数本身的返回指，即如果timeScrPicLeft return this, this.timeScrPicLeft()就是obj；如果timeScrPicLeft return true/false, this.timeScrPicLeft()就是boolean, 如果没有return语句，就是undefined。所以说，参数无效，还是setTimeout中this.time...()的问题！不幸的是，这个问题现在还没有解决。
都怪自己平常学的太粗浅了....

Answer 13

问题还是终于解决了。昨天弄了一下午，不知道怎么办，睡一觉起来，就有了灵感！还是setTimeout和setInterval中this的错。这个this是对函数的应用，所以和“sohighthesky”说的一样，把这个this转换一下，就可以了，以setTimeout为例：我改成了：
var _thisTime = this
var timersObj = setTimeout(function(){_thisTime.timeScrPicLeft()}, this.speed)
这样就可以正常运行啊。感谢各位的帮助啊！这是我写的一个小类，一个简单的图片移动,代码稍作修改就可以增加右移动和事件处理。我对js学的比较粗，肯定还有不完善的地方也希望大家提出来：yeeege#126.com----html中js-----<script language="javascript">
<!--
var picNewsObj = new SimplePicScroll("picNewsContainer")
picNewsObj.setScrollCont("scrollPicNewsContent")
picNewsObj.setScrollContTable("picNewsCont")
picNewsObj.setPicCont1("picNewsTd1")
picNewsObj.setPicCont2("picNewsTd2")
picNewsObj.setPageWidth(166)
picNewsObj.init()
//-->
</script>
----SimplePicScroll.js代码----
function SimplePicScroll(scrollId){
this.scrollId = scrollId
this.scrollCont = ""  //必须设置
this.scrollContTable = ""  //必须设置
this.picCont1 = "" //必须设置
this.picCont2 = "" //必须设置
this.speed = 30 //速度(毫秒)。 默认30毫秒
this.space = 0 //每次移动(px)。 默认0px
this.pageWidth = 0 //必须设置。 翻页宽度,它与内部的一个TD的宽度一致，其计算由img宽度，img的margin,padding,border等实际站位宽度得出
this.intervalTime = 2500 //每次动作的间隔时间。 默认2.5秒
this.autoPlayObj=null
this.timersObj = null
this.imgContWidth = 0
this.isAutoPic = true
this.scrollLock=true
this.currentW=0
this.$= function(id){
return "string" == typeof id ? document.getElementById(id) : (typeof id == "object" ? id : null)
}
}
simplePicScroll.prototype = {
setScrollCont:function(scrollCont){
this.scrollCont = scrollCont
},
setScrollContTable:function(scrollContTable){
this.scrollContTable = scrollContTable
},
setPicCont1:function(picCont1){
this.picCont1 = picCont1
},
setPicCont2:function(picCont2){
this.picCont2 = picCont2
},
setSpeed:function(speed){
this.speed = speed
},
setSpace:function(space){
this.space = space
},
setPageWidth:function(pageWidth){
this.pageWidth = pageWidth
},
setIntervalTime:function(intime){
this.intervalTime = intime
},
examProperties:function(){
var errorsInfo = ""
if(this.scrollCont == ""){errorsInfo = errorsInfo +　"没有设置<font color='red'>Div主容器id</font><br />"}
if(this.scrollContTable==""){errorsInfo = errorsInfo +　"没有设置<font color='red'>图片主容器id</font><br />"}
if(this.picCont1==""){errorsInfo = errorsInfo +　"没有设置<font color='red'>原始图片容器id</font><br />"}
if(this.picCont2==""){errorsInfo = errorsInfo +　"没有设置<font color='red'>复制图片容器id</font><br />"}
if(this.pageWidth==""){errorsInfo = errorsInfo +　"没有设置<font color='red'>翻页移动的宽度</font><br />"}
return errorsInfo
}
}
simplePicScroll.prototype.autoPlayPic = function(){
var _thisAuto = this
if(this.isAutoPic){
clearInterval(this.autoPlayObj)
this.autoPlayObj = setInterval(function(){ _thisAuto.picLeftGo();}, this.intervalTime)
}
}
simplePicScroll.prototype.picLeftGo = function(){
clearInterval(this.autoPlayObj)
this.examBorder()
if(this.scrollLock){this.timeScrPicLeft()}
this.autoPlayPic()
}
simplePicScroll.prototype.picLeftStop = function(){
clearInterval(this.autoPlayObj)
this.examBorder()
this.scrollLock=false
}
simplePicScroll.prototype.examBorder = function(){
with(this.$(this.scrollCont)){
scrollLeft = scrollLeft<this.imgContWidth ? scrollLeft : 0
scrollLeft-= scrollLeft%this.pageWidth==0 ? 0 : scrollLeft%this.pageWidth
}
}
simplePicScroll.prototype.timeScrPicLeft = function(){
var _thisTime = this
var perWidth, tempspace, tempMoreW
tempMoreW=0
perWidth = this.$(this.scrollCont).scrollLeft%this.pageWidth
tempspace=Math.round((perWidth+1)*0.2+1)
if(this.space==0){
this.$(this.scrollCont).scrollLeft+=tempspace
this.currentW+=tempspace
}else{
this.$(this.scrollCont).scrollLeft+=this.space
this.currentW+=this.space
}
if(this.currentW<this.pageWidth){
var timersObj = setTimeout(function(){_thisTime.timeScrPicLeft()}, this.speed)
}else{
clearTimeout(timersObj)
tempMoreW = this.currentW-this.pageWidth
if(tempMoreW>0){
this.$(this.scrollCont).scrollLeft-=tempMoreW
tempMoreW=0
}
this.currentW = 0
}
}
simplePicScroll.prototype.init = function(){
var errInf = this.examProperties()
if(!errInf==""){alert("你的图片滚动设置存在错误：<br />"+errInf); return}
this.imgContWidth = this.$(this.scrollContTable).offsetWidth
if(this.imgContWidth<=this.$(this.scrollCont).offsetWidth){
this.isAutoPic = false
}
else{
this.$(this.picCont2).innerHTML=this.$(this.picCont1).innerHTML
}

this.autoPlayPic()

var _this=this;
    this.$(this.scrollId).onmouseover = function() {
        _this.scrollLock = false;
        clearInterval(_this.autoPlayObj)
    }
    this.$(this.scrollId).onmouseout = function() {
        _this.scrollLock = true;
        _this.autoPlayPic()
    }
}

Answer 14

贴代码时忘了修改SimplePicScroll中，所有的S要大写！