html5实现无缝滚动的效果

在开发中我们经常会看到这样的应用场景。无缝滚动。就是几张图循环播放。图就不上了 ,不会制作gif。
直接上代码,避免以后重复造车轮。


<html>

    <head>
        <meta charset="UTF-8">
        <title>走马灯效果title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #div1 {
                background: red;
                width: 1200px;
                height: 250px;
                margin: 100px auto;
                position: relative;
                overflow: hidden;
            }

            #div1 ul {
                position: absolute;
                left: 100;
                top: 0;
            }

            #div1 ul li {
                float: left;
                list-style: none;
                width: 300px;
                height: 250px;
            }

            #div1 ul li img {
                width: 300px;
                height: 250px;
            }
        style>

        <script type="text/javascript">
            window.onload = function() {
                var oDiv1 = document.getElementById("div1");
                var oUl = oDiv1.getElementsByTagName("ul")[0];
                var aLi = oUl.getElementsByTagName("li");
                var space = -2;

                oUl.innerHTML += oUl.innerHTML;
                oUl.style.width = aLi[0].offsetWidth * aLi.length + 'px';

                function play() {
                    if(oUl.offsetLeft < -oUl.offsetWidth / 2) {
                        oUl.style.left = '0';
                    }
                    if(oUl.offsetLeft > 0) {
                        oUl.style.left = -oUl.offsetWidth / 2 + 'px';
                        space = 2;
                    }
                    oUl.style.left = oUl.offsetLeft + space + 'px';
                };
                var timer = setInterval(play, 30);
                oDiv1.onmouseover = function() {
                    clearInterval(timer);
                };
                oDiv1.onmouseout = function() {
                    timer = setInterval(play, 30);
                };
                var oLeft = document.getElementsByTagName("a")[0];
                var oRidht = document.getElementsByTagName("a")[1];
                oLeft.onclick = function() {
                    space = -2;
                }
                oRidht.onclick = function() {
                    space = 2;
                }
            };
        script>

    head>

    <body>
        <div>
            <a href="javascript:;">向左运动a>
            <a href="javascript:;">向右运动a>
        div>
        <div id="div1">
            <ul>
                <li>
                    <img src="img/6e6f32045de828a239ea948b261a2783.png" />
                li>
                <li>
                    <img src="img/7d9cabd86d8aa35f87d1630242919699.jpg" />
                li>
                <li>
                    <img src="img/d77d3f09a1cd86ee05f9dc069676494b.jpg" />
                li>
                <li>
                    <img src="img/ed388771ab4a232dbb0a14a8e90d467d.jpg" />
                li>
            ul>
        div>
    body>

html>

实现了向左或向右的无缝滚动

你可能感兴趣的:(Html5)