原生js无缝滚动
<style type="text/css">
#demo{width:100%;height:auto;overflow:hidden;line-height:30px;font-size:13px;font-family:'宋体';color:#0C77CF;font-weight:bold;margin: 0 auto;position:absolute;bottom:1rem;}
#demoin {width: 100%;height: auto;margin: 0 auto;white-space: nowrap;overflow: hidden;}
#demo #demo1, #demo #demo2{display:inline}
</style>
<div id="demo">
<div id="demoin">
<div id="demo1">
<a href=""><img src="/skin/default/sjym/sjz_03.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_06.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_09.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_03.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_06.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_09.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_03.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_06.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_09.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_03.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_06.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_09.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_03.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_06.jpg" /></a>
<a href=""><img src="/skin/default/sjym/sjz_09.jpg" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script type="text/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);
}
}
</script>