javascrip練習——圖片的無縫滾動

知識點：

1. offsetWidth；
2. scrollLeft；
3. setInterval()；
4. 立即執行函數；

html代碼：

<div id="parent">
    <div id="children_box">
        <ul id="children1">
            <li><img src="images/img1.jpg" /></li>
            <li><img src="images/img2.jpg" /></li>
            <li><img src="images/img3.jpg" /></li>
            <li><img src="images/img4.jpg" /></li>
            <li><img src="images/img5.jpg" /></li>
            <li><img src="images/img6.jpg" /></li>
            <li><img src="images/img7.jpg" /></li>
        </ul>
        <ul id="children2"></ul>
    </div>
</div>

css代碼：

html { background: #242424; }
html, body, ul, li { margin: 0; padding: 0; }
li { list-style-type: none; }
img { display: block; max-width: 100%; max-height: 100%; }
#parent { width: 100%; height: 294px; overflow: hidden; position: relative; background: #fff; }
#children_box { width: 9000px; overflow: hidden; position: absolute; left: 0px; top: 0; }
#children1, #children2 { float: left; }
#children_box ul li { float: left; height: 294px; margin-right: 2px; }
#children_box ul li img { width: auto; height: 100%; }

js代碼：

(function () {
    var speed  = 5;
    var parent = document.getElementById('parent');
    var child1 = document.getElementById('children1');
    var child2 = document.getElementById('children2');

    child2.innerHTML = child1.innerHTML;
    function Marquee() {
        if (child1.offsetWidth - parent.scrollLeft <= 0) {
            parent.scrollLeft = 0;
        } else {
            parent.scrollLeft++;
        }
    }
    var MyMar = setInterval(Marquee, speed);
    parent.onmouseover = function () { clearInterval(MyMar) };
    parent.onmouseout = function () { MyMar = setInterval(Marquee, speed) };
}());

demo下載地址：https://git.oschina.net/skyfood/wfgu.git

（完）