JS seamless rotation

Method manual settingHTML:<!--<div class="box">
        <div class="winBox">
            <ul class="scroll">
                <li><a href="#">Fashion casual pants 68 yuan < /a> < /li>< li> < a href="#">Woolen sweater 38 yuan < /a> < /li>< li> < a href="#">The new snow boots are 88 yuan < /a> < /li>< li> < a href="#">Thickening flannel 108 yuan < /a> < /li>< li> < a href="#">Panty hose 19 yuan, 2 pairs of < /a> < /li>< li> < a href="#">Fashion casual pants 68 yuan < /a> < /li>< li> < a href="#">Woolen sweater 38 yuan < /a> < /li>< li> < a href="#">The new snow boots are 88 yuan < /a> < /li>< li> < a href="#">Thickening flannel 108 yuan < /a> < /li>< li> < a href="#">Panty hose 19 yuan, 2 pairs of < /a> < /li>< /ul>< /div>< /div> -->

JS：  $(function () {
 
       var num = 0;
 
       var a= $(".scroll").css({
            left: num
        })

       function goLeft() {
     
       //750According to the size you give, variable.
   
       if (num == -750) {
        
       num = 0;
            }
     
       num -= 1;
        
       $(".scroll").css({
         
       left: num
     
       })
     
   }
    
    //Set scroll speed
    
    var timer = setInterval(goLeft, 5);
    
    //When mouse is passed, scroll stops.
    
    $(".box").hover(function () {
        
    clearInterval(timer);
    
    },
        
    function () {
            
    timer = setInterval(goLeft, 5);
        
    })

    })

css：

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: 2000px;
    height: 40px;
    overflow: hidden;
    position: relative;
    background: pink;
}

.scroll {
    widthThe size is determined according to the length and number of Li of Li below.Width: 1800px;Position: absolute;Left: 0px;Top: 0px;}.scroll Li {Width: 150px;float: left;
        line-height: 40px;
        text-align: center;
    }






Method two automaticDIV:<div id="demo">
            <div id="indemo">
                <div id="demo1">
                    <a href="#"><img width="300px" height="170px" src="/css/images/TTT.png" border="0" /></a>
                    <a href="#"><img width="300px" height="170px" src="/css/images/Flower.Png" border="0" /></a>
                    <a href="#"><img width="300px" height="170px" src="/css/images/logo.png" border="0" /></a>
                    <a href="#"><img width="300px" height="170px" src="/css/images/TTT.png" border="0" /></a>
                    <a href="#"><img width="300px" height="170px" src="/css/images/Flower.Png" border="0" /></a>
                    <a href="#"><img width="300px" height="170px" src="/css/images/logo.png" border="0" /></a>
                </div>
                <div id="demo2"></div>
            </div>
        </div>

JS：var speed = 10;
    var tab = document.getElementById("demo");
    var tab1 = document.getElementById("demo1");
    var tab2 = document.getElementById("demo2");
    tab2.innerHTML = tab1.innerHTML;
    function Marquee() {
        if (tab2.offsetWidth - tab.scrollLeft <= 0)
            tab.scrollLeft -= tab1.offsetWidth
        else {
            tab.scrollLeft++;
        }
    }
    var MyMar = setInterval(Marquee, speed);
    tab.onmouseover = function () { clearInterval(MyMar) };
    tab.onmouseout = function () { MyMar = setInterval(Marquee, speed) };

CSS：
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 1200px;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}