图片滚动

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    #box{
        width: 840px;
        height: 220px;
        box-shadow: 0px 0px 20px #000;
        margin:50px auto;
        overflow: hidden;
        border-radius: 15px;
        position: relative;
    }
    li{
        list-style: none;
    }
    #box ul{
        position: absolute;
        top: 0;
        left: 0;
    }
    #box ul li{
        width: 200px;
        float: left;
        margin: 0 5px;
    }

</style>
<body>
    <div id="box">
        <ul>
            <li>
                <a href="#">
                <img src="3.jpg" alt="" width="200" />
                </a>
            </li>
            <li>
                <a href="#">
                <img src="2.jpg" alt="" width="200" />
                </a>
            </li>
            <li>
                <a href="#">
                <img src="1.jpg" alt="" width="200" />
                </a>
            </li>
            <li>
                <a href="#">
                <img src="0.jpg" alt="" width="200" />
                </a>
            </li>
        </ul>
    </div>

    <script type="text/javascript">
        window.onload = function(){
            var box = document.getElementById("box");
            var ul = box.children[0];
            var li = ul.children;//复制数组图片

            ul.innerHTML += ul.innerHTML;
            ul.style.width = li.length*li[0].offsetWidth+80+'px';

            setInterval(function(){
                var i = ul.offsetLeft+10;
                if(i>=0){
                    i = -ul.offsetWidth/2;
                }
                ul.style.left = i + 'px';
            }, 300);
        }
    </script>
</body>
</html>

 

posted @ 2016-03-08 10:22  嘆世殘者——華帥  阅读(150)  评论(0)    收藏  举报