原生js实现无缝滚动

水平方向无缝滚动

滚动支持图片，文字
原理 ：一个大的盒子中放置两个盒子，通过设置offsetWidth，scrollLeft的关系来实现，而且还用到定时器函数setInterval，当手指移动上去定义滚动，离开继续滚动。兼容各大浏览器。
HTML代码

  <div id="demo">        <div id="demoin">            <div id="demo1">                <a href="">测试文字1</a>                <a href="">测试文字2</a>                <a href="">测试文字3</a>                <a href="">测试文字4</a>                <a href="">测试文字5</a>                <a href="">测试文字7</a>                <a href="">测试文字8</a>                <a href="">测试文字9</a>                <a href="">测试文字10</a>                <a href="">测试文字11</a>                <a href="">测试文字12</a>                <a href="">测试文字13</a>                <a href="">测试文字14</a>                <a href="">测试文字15</a>                <a href="">测试文字16</a>                <a href="">测试文字17</a>            </div>            <div id="demo2"></div>        </div>    </div>

CSS代码

#demo{            width:1000px;            height:30px;            overflow:hidden;            line-height:30px;            font-size:13px;            font-family:'宋体';            background:#ddd url(images/notice.png) no-repeat 25px center;            color:#0C77CF;            font-weight:bold;            margin: 0 auto;        }        #demoin {            width: 900px;            height: 30px;            margin: 0 auto;            white-space: nowrap;            overflow: hidden;        }        #demo #demo1, #demo #demo2{display:inline}

Javascript代码

 window.onload = function(){        scrollLeft();    };    function scrollLeft(){        var speed = 20;        var tab = document.getElementById('demoin');        var tab1 = document.getElementById('demo1');        var tab2 = document.getElementById('demo2');        tab2.innerHTML = tab1.innerHTML;        function Marquee(){            if(tab2.offsetWidth - tab.scrollLeft <=0) {                        tab.scrollLeft = 0;            }else{                tab.scrollLeft ++;            }        }        var timer = setInterval(Marquee,speed);        tab.onmouseover = function(){            clearInterval(timer);        };        tab.onmouseout = function(){            timer = setInterval(Marquee,speed);        }    }

效果图：

效果就是一直滚动

注意：内容的宽度必须大于容器的宽度，否则无法滚动，测试文字一般是使用ajax后台获取。