试图创建自定义jQuery文本滚动

Question

我试图做一个自己的自定义js文本滚动（我希望文本滚动到一个div内的左侧，然后重复滚动一次又一次）。

但我有一些问题。我真的不能把我的手指放在我做错了什么地方，或者我需要新的功能。我能得到的所有帮助都是受欢迎的。

这里有一个小提琴例如：http://jsfiddle.net/Na373/

的HTML：

<div class="wrap"> 
    <div class="scroll"> 
     <ul class="active"> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
      <li>Hello World</li> 
     </ul> 
    </div> 

的JS：

$ul = $('.scroll ul'); 
//copys the existing ul and appends it after the existing one 
$('.scroll').append($ul.clone().removeClass().addClass('not_active')); 

function scroll() { 
    $active = $('.scroll ul.active'); 

    $active.each(function() { 
     $not_active = $('.scroll ul.not_active'); 

     // foreach time the function runs the ul goes "left: -1px;" 
     var current_position = parseInt($(this).css('left')); 
     var new_position = current_position - 1; 
     $(this).css('left', new_position+'px'); 

     var parent_width = $(this).parent().outerWidth(); // gets the width of ".scroll" 
     var width = $(this).outerWidth(); // gets the width of the "ul" 
     var shown_all = current_position + width; 

     // if the right corner of the "ul" are att the right corner of ".scroll" 
     // this if statement executes and adds new existing class on the "ul.not_active" 
     // and adds class ".active" instead 
     // this means that there are 2 ul with the class active 
     //running simultaneously 
     if (shown_all == parent_width) { 
      $not_active.removeClass().addClass('active'); 
     } 

     // here it checks if the "ul.active" have past its own length to left 
     // Here im trying to make it "not_active" and put it after the existing ".active" 
     // 
     // <ul class="active">....</ul> ----> <ul class="not_active">...</ul> 
     // 
     // then put it after the other "ul.active" 
     // 
     //   <ul class="active 
     // ---------> <ul class="not_active"></ul> 
     // 
     // So it all beginns from the beginning 
     if (current_position == '-'+width) { 
      $(this).removeClass().addClass('not_active').css('left', '0'); 
      $(this).insertAfter($('.scroll ul').next()); 
     } 
    }); 
}; 
// And here I run the function 
setInterval(scroll, 10); 

CSS：

.wrap { 
    position: relative; 
    padding: 10px 10px 10px; 
    height: 18px; 
    background: #000; 
    color: #fff; 
    overflow: hidden; 
    width: 500px; 
} 
.scroll { 
    width: 500px; 
    white-space: nowrap; 
} 
.scroll ul { 
    left: 0; 
    position: relative; 
    margin: 0; 
    padding: 0; 
    display: inline; 
    list-style: none; 
} 
.scroll ul li { 
    padding: 0; 
    margin: 0; 
    display: inline; 
} 

Answer 1

我觉得你的问题是在下面的if语句

if (shown_all == parent_width) { 

据我所知，shown_all = current_position + width，意味着shown_all将在0 +宽UL的开始，并将在0结束的条件。用当前的代码，if语句永远不会是真的。

如果您更改的if语句if (shown_all == 0)或更改您如何设置可变shown_all到var shown_all = -current_position + width;，我想你会看到一个更好的结果。

Answer 2

我现在来到这里工作的例子： http://jsfiddle.net/s8TnL/

所有的反应是更受欢迎。我很高兴收到有关性能和功能的回复。

HTML：

<div class="wrap"> 
<div class="scroll"> 
    <ul class="active"> 
     <li>Hello World</li> 
     <li>Hello World</li> 
     <li>Hello World</li> 
     <li>Hello World</li> 
     <li>Hello World</li> 
     <li>Hello World</li> 
     <li>Hello World</li> 
    </ul> 
</div> 

CSS：

.wrap { 
    position: relative; 
    padding: 10px 10px 10px; 
    height: 18px; 
    background: #0BF397; 
    color: #fff; 
    overflow: hidden; 
    width: 500px 
} 
.scroll { 
    display: block; 
    white-space: nowrap; 
} 
.scroll ul { 
    position: relative; 
    margin: 0; 
    padding: 0; 
    display: inline; 
    list-style: none; 
} 
.scroll ul li { 
    padding: 0; 
    margin: 0; 
    display: inline; 
} 

JS：

$ul = $('.scroll ul'); 
$('.scroll').append($ul.clone().removeClass().addClass('not_active')); 

$ul.hover(function() { 
    clearInterval(activate); 
}, function() { 
    activate = setInterval(scroll, 10); 
}); 

function scroll() { 
    $active = $('.scroll ul.active'); 

    $active.each(function() { 
     $not_active = $('.scroll ul.not_active'); 
     var offset = $(this).offset(); 

     var current_position = offset.left; 
     var new_position = current_position - 1; 
     $(this).offset({ 
      left: new_position 
     }); 

     var parent_width = $(this).parent().outerWidth(); 
     var width = $(this).outerWidth(); 

     var shown_all = current_position + width; 

     if (shown_all == parent_width) { 
      $not_active.removeClass().addClass('active').offset({ 
       left: parent_width 
      }); 
     } 

     if (current_position == '-' + width) { 
      $(this).removeClass().addClass('not_active'); 
     } 
    }); 
}; 

activate = setInterval(scroll, 10);