js图片无缝滚动

浏览数：32 / 时间：2015年06月09日

<html>
    <head>
        <title>图片滚动</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
        <style>
            #demo {
                background:#fff;
                overflow: hidden;
                width:500px;
                border: 1px solid #ccc;
            }
            #demo img {
                border:3px solid #f2f2f2;
            }
            #indemo {
                float:left;
                width:800%;
            }
            #demo1 {
                float:left;
            }
            #demo2 {
                float:left;
            }
        </style>
    </head>
    <body>
        <div id="demo">
            <div id="indemo">
                <div id="demo1">
                    <a href="#"><img src="../resources/images/1.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/2.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/3.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/4.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/5.jpg" border="0" /></a>
                    <a href="#"><img src="../resources/images/6.jpg" border="0" /></a>
                </div>
                <div id="demo2"></div>
            </div>
        </div>
        <script type="text/javascript">
            var speed = 5;
            var obj = $(‘demo‘);
            var obj1 = $(‘demo1‘);
            var obj2 = $(‘demo2‘);
            obj2.innerHTML = obj1.innerHTML;
            function marquee() {
                if(obj2.offsetWidth - obj.scrollLeft <= 0) {
                    obj.scrollLeft -= obj1.offsetWidth;
                } else {
                    obj.scrollLeft++;
                }
            }
            var myMar = window.setInterval(marquee,speed);
            obj.onmouseover = function() {
                window.clearInterval(myMar);
            }
            obj.onmouseout = function() {
                myMar = window.setInterval(marquee,speed);
            }
            function $(id) {
                return document.getElementById(id);
            }
        </script>
    </body>
</html>