图片无缝滚动

来源：互联网发布：股票医生软件下载编辑：程序博客网时间：2024/06/02 22:26
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            * {                margin: 0;                padding: 0;            }            .box {                width: 300px;                height: 200px;                margin: 100px auto;                border: solid 1px grey;                position: relative;                /*overflow: hidden;*/            }            img {                vertical-align: top;  //去除img默认的3px距离            }            ul {    //注意ul要用绝对定位，后续图片滚动实则是改变ul的left值；                width: 300%;                height: 200px;                position: absolute;                top: 0;                left: 0;            }            li {                float: left;                list-style: none;            }        </style>    </head>    <body>        <div id="box" class="box">            <ul id="bom">                <li><img src="img/01.jpg" /></li>                <li><img src="img/02.jpg" /></li>                  <li><img src="img/01.jpg" /></li>  //最后一张图片必须与第一张相同，这样可以保证第三张显示结束之后，这个Ul快速从新开始，这是第三张图会和第一张，图片内容，初始位置都重合，给人错觉就是是同一张图，接下来正常显示第二张，给人无缝滚动的错觉；            </ul>        </div>    </body>    <script type="text/javascript">        var oUl = document.getElementById('bom');        var oLi = oUl.children[0];          var timer = null;        var num = 0;        timer = setInterval(fn,10);        function fn(){            num--;            num > -600 ? oUl.style.left = num + 'px' : num = 0;  //保证ul滚动，且可以连续滚动        }        oUl.onmouseover = function(){  //鼠标移入ul时，停止滚动            clearInterval(timer);        }        oUl.onmouseout = function(){            timer = setInterval(fn,10);   //鼠标移出ul时，继续滚动        }    </script></html>
阅读全文
0 0