JS 求助,滚动新闻总是出现乱滚的现象

Question

这样的 , 自己做了个站 .
首页有很多滚动内容
JS 地址是 : http://www.zkylm.com/app/view/default/js/index_scroll.class.js
有兴趣就看下首页效果 , 就是那个最顶部的新闻滚动 , 所有的滚动都是一个程序套出来来的 ( 每 10 秒自动滚一下 ) .
可是 , 总是不自觉地变成 2 下 , 我蛋疼的要命 , JS 文件代码给出了 , 请高手明示算法哪里有问题或者是给个新思路 , 感谢大虾 .

Answer 1

我把代码贴出来吧 , 谢谢(function(){
  var topscr = function(){    this.l_obj = $('.arrleft');
    this.r_obj = $('.arrrig');
    this.num = this.l_obj.parent().find('.cont li').length;
    this.width = this.l_obj.parent().find('.cont li:first').width();
    this.scroll_num = 1;
    this.scroll_obj = $('.right > .cont > ul');
    this.pointer = false;
    this.id = null;  }  topscr.prototype = {
    SetClick:function(){
      var current = this;
      this.l_obj.click(function(){
        if(current.scroll_num <= 1) return false;
        current.scroll_num--;
        current.scroll_to_num(current.scroll_num);
      });
  
      this.r_obj.click(function(){
        if(current.scroll_num >= current.num) current.scroll_num = 0;
        current.scroll_num++;
        current.scroll_to_num(current.scroll_num);
      });      // 鍙纰板埌 .right , 灏卞嚭鍙戞鍔ㄤ綔 , 姝や篃鏄负鍒嗛厤涓嶅潎浣滆€冭檻
      this.scroll_obj.parent().parent().hover(
        function(){
          current.SetPointer(true);
          clearTimeout(current.id);
        },
        function(){
          current.SetPointer(false);
          current.id = setTimeout(function(){current.AutoScroll()},index_scroll_time*1000);
        }
      );      setTimeout(function(){current.AutoScroll()},index_scroll_time*1000);
      return this;
    },
    scroll_to_num:function(number){
      var w = -(number-1)*345;
      this.scroll_obj.animate({'left': w},600);
    },
    SetPointer:function(bool){
      this.pointer = bool;
    },
    AutoScroll:function(){
      var current = this;
      if ( this.pointer == true ){
        clearTimeout(current.id);
        return false;
      }
      this.id = setTimeout(function(){current.AutoScroll()},index_scroll_time*1000);
      if(current.scroll_num >= current.num) current.scroll_num = 0;
      this.scroll_num++;
      this.scroll_to_num(this.scroll_num);
    }
  }  window.topscr = topscr;
})();这样的 , 在首页只要  var tops = new topscr();
  tops.SetClick()这样它就会使用
tops.AutoScroll();
让它自动滚动了 . 
就是这个算法 , 间隔是有问题的 . 
哎

Answer 2

 scroll_to_num:function(number){
      //如果是r_obj或者l_obj事件调用的，就clearTimeout(this.id);
      var w = -(number-1)*345;
      this.scroll_obj.animate({'left': w},600);出现的问题的原因可能是这样的，当快到10秒的时候，你触发了一下r_obj的事件，调用了scroll_to_num，而此时定时器也开始执行了，所以出现你所说的问题。    

Answer 3

并不是这样的亲 , 看到此段代码了吗？
      this.scroll_obj.parent().parent().hover(
        function(){
          current.SetPointer(true);
          clearTimeout(current.id);
        },
        function(){
          current.SetPointer(false);
          current.id = setTimeout(function(){current.AutoScroll()},index_scroll_time*1000);
        }此段的 this.scroll_obj.parent().parent() 这个元素包括了 l_obj 和 r_obj ( 也就是向左和向右按钮 . )
也就是说在碰到整个大框的时候 , 它就会执行 current.SetPointer(false) , 将所有和滚动相关的事件过滤掉 . 所以不存在亲说的问题 .
另外 , 在鼠标离开大框的时候 , 它会从新执行
          current.id = setTimeout(function(){current.AutoScroll()},index_scroll_time*1000);
开始从新自动滚动 , 而我怀疑是这个过程出了问题 , 可没有清晰的找到问题 .

Answer 4

this.id = setTimeout(function(){current.AutoScroll()},index_scroll_time*1000);第一次执行定时器你没有保存定时器返回的值，这里保存一下。

Answer 5

这样写
this.fid = setTimeout(function(){current.AutoScroll()},index_scroll_time*1000);this.scroll_obj.parent().parent().hover(
        function(){
          current.SetPointer(true);
          //清除第一个定时器
          clearTimeout(current.fid);
          clearTimeout(current.id);
        }