无缝滚动scrollLeft

原创 2015年11月18日 15:06:40
<!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>

相关文章推荐

javascript实现图片无缝滚动(scrollLeft的用法介绍)

无标题文档 .piczhanshi{width:976px;height:167px;border:1px #999999 solid;margin:0 auto;} h3{ float:left;...

scrollLeft,scrollTop,滚动代码的总结

scrollLeft,scrollTop,滚动代码的总结 今天和兄弟一起研究了一下横向和竖向图片滚动的代码,很兴奋,因为解决了几个小问题 第一个:  for(var i=1;i      ...
  • xiqim
  • xiqim
  • 2016年09月29日 14:23
  • 130

各浏览器对于获取文档水平及垂直方向滚动条位置(scrollLeft、scrollTop)时的参考元素存在差异

 问题描述 针对获取页面的垂直滚动条的位置,IE Firefox Opera 标准模式下使用 document.documentElement.scrollLeft 获取页面的水平滚动条位置,...

scrollLeft,scrollTop,滚动代码的总结

今天和兄弟一起研究了一下横向和竖向图片滚动的代码,很兴奋,因为解决了几个小问题 第一个:  for(var i=1;i      {           document.getElement...

scrollLeft,scrollTop,滚动代码的总结

今天和兄弟一起研究了一下横向和竖向图片滚动的代码,很兴奋,因为解决了几个小问题 第一个:  for(var i=1;i      {           document.getElement...
  • qjfpjie
  • qjfpjie
  • 2011年11月18日 11:12
  • 335

无缝滚动css+js

  • 2014年12月15日 16:08
  • 258KB
  • 下载

文字无缝滚动效果代码

  • 2015年02月04日 17:44
  • 41KB
  • 下载

android开发游记:广告轮播器无限循环滚动 首尾无缝切换解决方案

图片轮播器在现在的应用中已经很常见了,已经形成了一种新型的广告展示的标准,网上有很多实现的源码,但是使用之后发现多少是继承viewpager来实现,并没有处理好从最后一页到第一页的切换效果,viewp...

js无缝滚动

  • 2013年02月16日 11:27
  • 57KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:无缝滚动scrollLeft
举报原因:
原因补充:

(最多只允许输入30个字)