关闭

无缝滚动scrollLeft

标签: js无缝滚动
155人阅读 评论(0) 收藏 举报
分类:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{margin:0;
            padding: 0;}

        #outer{
            width: 996px;
            height: 400px;
            /*overflow: scroll;*/
            overflow: hidden;
            margin:0 auto;

        }
        #inner{
            width: 1992px;
            height: 400px;
            background: yellow;
        }
        img{
            width: 249px;
            height: 400px;
        }
        li{
            list-style-type: none;
            float: left;
        }
    </style>

</head>
<body>
    <!-- scrollTop:右侧滚动条的位置
    知识点scrollLeft:横向滚动条距离左侧的位置 -->
    <div id = "outer">
        <div id = "inner">
            <ul>
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>    
                <li><img src="img/3.jpg" alt=""></li>
                <li><img src="img/1.jpg" alt=""></li>
                <li><img src="img/5.jpg" alt=""></li>
                <li><img src="img/4.jpg" alt=""></li>                
            </ul>
        </div>
    </div>
    <script>
        outer = document.getElementById('outer');
        inner = document.getElementById('inner');
        oli = document.getElementsByTagName('li');
        var outerWidth = outer.offsetWidth;
        var time = null;
        var x = 0;    //用来改变scrollLeft值的变量x
        var time2 = null;
        var olilength = oli.length/2; //li个数的一半,也就是不重复的图片个数
        function getSCL(){
            x++;
            outer.scrollLeft = x;
            for(i=1;i<=olilength;i++)
            {
                if(x==(outerWidth/olilength)*i)  //横滚动轮scrollLeft =x ;x=一张图片宽时暂停,2张图片宽时暂停,3张,4张时也暂停……
                {
                clearInterval(time); //暂停
                time2 = setTimeout(function(){
                    time = setInterval(getSCL,1);  //隔两秒(暂停2S后启动计时器)让之以原速继续前进
                },2000);
                }
            }
            if(x>=outerWidth)    //**实现无缝滚动,当滚动到第一组图的最后一张时,将横滚轮变成0,从第一组图开始重新滚动;
            {
                x = 0;
            }
        }
        time = setInterval(getSCL,1);
        
        inner.onmouseover = function(){
            clearInterval(time);//鼠标移入,清除计时器
            clearInterval(time2);
        }
        inner.onmouseout = function(){
            clearInterval(time);//鼠标移出先清除计时器,避免重复进出造成重复调用计时器产生的加速现象;
            clearInterval(time2);
            time=setInterval(getSCL,1);//鼠标移出,继续滚动;
        }
    </script>
</body>
</html>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1496次
    • 积分:42
    • 等级:
    • 排名:千里之外
    • 原创:3篇
    • 转载:0篇
    • 译文:0篇
    • 评论:0条
    文章分类
    文章存档