《JavaScript学习笔记十》：无缝滚动的实现

最新推荐文章于 2021-07-15 10:21:02 发布

HelloWorld_EE

最新推荐文章于 2021-07-15 10:21:02 发布

阅读量586

点赞数

分类专栏： javascript 文章标签： javascript html 移动无缝滚动

本文链接：https://blog.csdn.net/u010412719/article/details/51540802

版权

javascript 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

《JavaScript学习笔记十》：无缝滚动的实现

无缝滚动在很多网页上面都有这样一个功能，用于动态的显示一些图片信息。
本篇博文就是模拟这样一个功能的实现，所设计的知识点为:根据offsetLeft动态的获取位置更改控件的left的值来使得控件移动。

先看如下的简单的例子，一个Div控件不断向右移动

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    #div1 {width:200px;height:100px;position:absolute;background:red;left:70px;top:30px;margin:100px}
    </style>

    <script>
    window.onload=function()
    {
        setInterval(function()
        {
            var oDiv = document.getElementById('div1');
            oDiv.style.left=oDiv.offsetLeft+10+'px';
        },1000);
    };
    </script>
    </head>

    <body>
    <div id="div1">
    </div>
    </body>
    </html>

有了上面的基础，就来看看无缝滚动的具体实现的代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>
    <style>
    * {margin:0; padding:0;}
    #div1 {width:712px;height:108px;margin:100px auto;position:relative;background:red;overflow:hidden;}
    #div1 ul {position:absolute; left:0; top:0;}
    #div1 ul li {float:left; width:178px; height:108px; list-style:none;}
    </style>
    <script>
    window.onload=function()
    {
        var oDiv = document.getElementById('div1');
        var oUl = oDiv.getElementsByTagName('ul')[0];
        var oLi=oUl.getElementsByTagName('li');

        oUl.innerHTML+=oUl.innerHTML;  //用两倍来进行移动
        oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';//不能用：oLi[0].style.width
        var timer;
        var dis=2;
        function  move()
        {   
            //alert(oUl.offsetLeft);
            //alert(oUl.offsetWidth);
            if(oUl.offsetLeft<-oUl.offsetWidth/2)//即当向左滚动出去一半的时候，就立即将ul放在起点位置
            {
                oUl.style.left='0px';
            }
            if(oUl.offsetLeft>0)//即当向右滚动出去一半的时候，就立即将ul放在起点位置
            {
                oUl.style.left=-oUl.offsetWidth/2+'px';
            }
            oUl.style.left=oUl.offsetLeft+dis+'px';//由于ul为绝对定位，可以由width/height等来决定

        }
        timer=setInterval(move,100);

        //当我们鼠标移动到div上面时，就应该停止
        oDiv.onmouseover=function()
        {
            clearInterval(timer);
        };
        oDiv.onmouseout=function()
        {
            timer=setInterval(move,100);
        };

        var oBtn1=document.getElementById('btn1');
        var oBtn2=document.getElementById('btn2');
        btn1.onclick=function()
        {
            dis=-2;
        };
        btn2.onclick=function()
        {
            dis=2;
        };

    };
    </script>
    </head>

    <body>
    <input id="btn1" type="button" value="向左滚动" />
    <input id="btn2" type="button" value="向右滚动" />
    <div id="div1">
        <ul><!--每个图片大小为：178*108px -->
            <li><img src="img2/1.jpg" /></li>
            <li><img src="img2/2.jpg" /></li>
            <li><img src="img2/3.jpg" /></li>
            <li><img src="img2/4.jpg" /></li>
        </ul>

    </div>
    </body>
    </html>