jquery文字左右無縫滾動

需要引入jq

html： 

<div class="box">
  <div class="winBox">
    <ul class="scroll">
      <li><a href="#">時尚休閒褲68元</a></li>
      <li><a href="#">羊呢絨套衫38元</a></li>
      <li><a href="#">新款雪地靴88元</a></li>
      <li><a href="#">加厚法蘭絨108元</a></li>
      <li><a href="#">連褲襪19元2雙</a></li>
      
      <li><a href="#">時尚休閒褲68元</a></li>
      <li><a href="#">羊呢絨套衫38元</a></li>
      <li><a href="#">新款雪地靴88元</a></li>
      <li><a href="#">加厚法蘭絨108元</a></li>
      <li><a href="#">連褲襪19元2雙</a></li>
    </ul>
  </div>
</div>

css:

* {
	padding:0;
	margin:0;
	font-family:"微軟雅黑";
}
li {
	list-style:none;
}
a {
	text-decoration:none;
}
img {
	border:none;
}
.box {
	padding-left:50px;
	background:url("images/xtb.png") no-repeat;
	margin-top:100px;
	margin-left:100px;
}
.winBox {
	width:300px;
	height:40px;
	overflow:hidden;
	position:relative;
	background:pink;
}
.scroll {
	/*width的大小是根據下面li的長度和多少個li而定的，需注意！*/
			width:1500px;
	position:absolute;
	left:0px;
	top:0px;
}
.scroll li {
	width:150px;
	float:left;
	line-height:40px;
	text-align:center;
}

js:

$(function() {
    var num = 0;
    function goLeft() {
        //750是根據你給的尺寸，可變的
        if (num == -750) {
            num = 0;
        }
        num -= 1;
        $(".scroll").css({
            left: num
        })
    }
    //設置滾動速度
    var timer = setInterval(goLeft, 20);
    //設置鼠標經過時滾動停止
    $(".box").hover(function() {
        clearInterval(timer);
    },
    function() {
        timer = setInterval(goLeft, 20);
    })
})