文章内容详情

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

      阿喀交