原生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后台获取。