无缝滚动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>

ie中关于document.body.scrollLeft总是0的原因

凡是页面顶部声明为: DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/200...
  • yiyuhanmeng
  • yiyuhanmeng
  • 2012年09月24日 15:38
  • 1511

JavaScript js无间断滚动效果 scrollLeft方法 使用模板

JavaScript js无间断滚动效果 scrollLeft方法 使用模板 无间断滚动scrollLeft套用模板 #外层div的id值{width:px...
  • orichisonic
  • orichisonic
  • 2015年10月30日 13:14
  • 1371

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

无标题文档 .piczhanshi{width:976px;height:167px;border:1px #999999 solid;margin:0 auto;} h3{ float:left;...
  • u014071104
  • u014071104
  • 2014年04月25日 21:39
  • 4695

js控制的DIV一些属性 scrollLeft,scrollWidth,clientWidth,offsetWidth .

出处   http://blog.vsharing.com/jekkon/A1014627.html scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于对...
  • BenjaminP
  • BenjaminP
  • 2012年03月29日 10:13
  • 1354

关于scrollLeft的赋值问题

scrollTop和scrollLeft属性只有当他内部元素超出父级元素的时候才有效,否则将一直为0,貌似设置了也没用。...
  • fyzhu01
  • fyzhu01
  • 2014年08月26日 10:39
  • 2583

JavaScript scrollLeft等属性详解

 scrollHeight: 获取对象的滚动高度。  scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离 scrollTop:设置或获取位于对象最顶端和窗口中可见内容...
  • cmmiao1103
  • cmmiao1103
  • 2008年03月13日 17:42
  • 3555

scrollLeft等属性介绍

滚动类特效常用属性: scrollLeft 、scrollTop:设置或获取位于对象最顶/左端和窗口中可见内容的最顶/左端之间的距离。即当前上滚或左滚的距离。 scrollHeight、scrol...
  • u013063153
  • u013063153
  • 2016年10月13日 11:11
  • 1083

图片无缝滚动的原理和实例

无缝滚动的结构:一共两个盒子,第一个大盒子下套第二个大盒子,第二个大盒子下有4张图片,第一个大盒子宽度固定为600px,第二个大盒子宽度是400%; 原理:第一个盒子相对浮动,第二个盒子绝对浮动,让...
  • stopcpp
  • stopcpp
  • 2016年10月12日 10:55
  • 2747

实现无缝滚动与间歇性无缝滚动

这篇blog是使用html与js实现无缝滚动与间歇性无缝滚动,首先,先看一下效果图:     这种效果,在网站中经常见到,下面,我们实现这个效果。首先,这里有以下知识点:setInterval("表...
  • wangchaohx
  • wangchaohx
  • 2017年02月06日 17:16
  • 1189

文档滚动对 scrollTop scrollLeft的兼容性封装

Document /* 用通配符清除默认样式减少代码量,实际项目应对用到的标签清除默认样式 */ * { margin: 0; ...
  • Tyro_java
  • Tyro_java
  • 2016年01月01日 16:08
  • 934
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:无缝滚动scrollLeft
举报原因:
原因补充:

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