JS无缝轮播

方法一 手动设置

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>-->

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

       function goLeft() {
     
       //750是根据你给的尺寸，可变的
   
       if (num == -750) {
        
       num = 0;
            }
     
       num -= 1;
        
       $(".scroll").css({
         
       left: num
     
       })
     
   }
    
    //设置滚动速度
    
    var timer = setInterval(goLeft, 5);
    
    //设置鼠标经过时滚动停止
    
    $(".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 {
    width的大小是根据下面li的长度和多少个li而定的，需注意！
    width: 1800px;
    position: absolute;
    left: 0px;
    top: 0px;
}

    .scroll li {
        width: 150px;
        float: left;
        line-height: 40px;
        text-align: center;
    }






方法二 自动
  DIV：
<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/花.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/花.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;
}
JS无缝轮播

推荐阅读
