1. <div class="box">
    2. <div class="winBox">
    3. <ul class="scroll">
    4. <li><a href="#">时尚休闲裤68元</a></li>
    5. <li><a href="#">羊呢绒套衫38元</a></li>
    6. <li><a href="#">新款雪地靴88元</a></li>
    7. <li><a href="#">加厚法兰绒108元</a></li>
    8. <li><a href="#">连裤袜19元2双</a></li>
    9. <li><a href="#">时尚休闲裤68元</a></li>
    10. <li><a href="#">羊呢绒套衫38元</a></li>
    11. <li><a href="#">新款雪地靴88元</a></li>
    12. <li><a href="#">加厚法兰绒108元</a></li>
    13. <li><a href="#">连裤袜19元2双</a></li>
    14. </ul>
    15. </div>
    16. </div>

    css

    1. * {
    2. padding:0;
    3. margin:0;
    4. font-family:"微软雅黑";
    5. }
    6. li {
    7. list-style:none;
    8. }
    9. a {
    10. text-decoration:none;
    11. }
    12. img {
    13. border:none;
    14. }
    15. .box {
    16. padding-left:50px;
    17. background:url("images/xtb.png") no-repeat;
    18. margin-top:100px;
    19. margin-left:100px;
    20. }
    21. .winBox {
    22. width:300px;
    23. height:40px;
    24. overflow:hidden;
    25. position:relative;
    26. background:pink;
    27. }
    28. .scroll {
    29. /*width的大小是根据下面li的长度和多少个li而定的,需注意!*/
    30. width:1500px;
    31. position:absolute;
    32. left:0px;
    33. top:0px;
    34. }
    35. .scroll li {
    36. width:150px;
    37. float:left;
    38. line-height:40px;
    39. text-align:center;
    40. }

    JS

    1. $(function() {
    2. var num = 0;
    3. function goLeft() {
    4. //750是根据你给的尺寸,可变的
    5. if (num == -750) {
    6. num = 0;
    7. }
    8. num -= 1;
    9. $(".scroll").css({
    10. left: num
    11. })
    12. }
    13. //设置滚动速度
    14. var timer = setInterval(goLeft, 20);
    15. //设置鼠标经过时滚动停止
    16. $(".box").hover(function() {
    17. clearInterval(timer);
    18. },
    19. function() {
    20. timer = setInterval(goLeft, 20);
    21. })
    22. })