首页 > js教程 > 正文

js无缝滚动的实例分享

原创 2018-03-14 16:38:51 0 9

本文主要和大家分享js无缝滚动的实例,希望能帮助到大家。效果原理:让ul一直向左滚动 复制li,改变ul的宽度, 进行判断,是否越界 如果越界,重新定位。 控制向左向右,设定一个speed,更改其值的正负。

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title>无缝轮播</title>
        <style>
            *{margin: 0;padding: 0;}
            #p1{width: 800px;height: 150px;margin: 100px auto;position: relative;background: blue;overflow: hidden;}
            #p1 ul{position: absolute;top: 0;left: 0;}
            #p1 ul li{list-style-type: none;float: left;width: 200px;height: 150px;;}
            img{width: 200px;height: 150px;}
        </style>
        <script>
            window.onload=function(){
                //控制向左向右,主要是通过是加还是减speed
                var speed=-2;                function move(){
                        if(oUl.offsetLeft<-oUl.offsetWidth/2){                            //当其往左移动了四个li的宽度时,把整个图片拉回来
                            oUl.style.left=0;
                        }                        if(oUl.offsetLeft>0){                            //记得末尾加px
                            oUl.style.left=-oUl.offsetWidth/2+'px';
                        }
                        oUl.style.left=oUl.offsetLeft+speed+'px';
                };                var time=null;                var op = document.getElementById('p1');                var oUl = op.getElementsByTagName('ul')[0];                var oLi = op.getElementsByTagName('li');                //使其形成8个li
                oUl.innerHTML = oUl.innerHTML+oUl.innerHTML;
                oUl.style.width = oLi[0].offsetWidth*oLi.length+'px';

                time = setInterval(move,30);
                op.onmouseover= function(){
                    clearInterval(time);
                }
                op.onmouseout= function(){
                    time = setInterval(move,30);
                }                var oBtn = document.getElementsByTagName('button');
                oBtn[0].onclick = function(){
                    speed = -2;
                }
                oBtn[1].onclick = function(){
                    speed = 2;
                }
            }        </script>
    </head>
    <body>
        <button value="向左走">向左走</button>
        <button value="向右走">向右走</button>
        <p id="p1">
            <ul>
                <li><img src="img/1.jpg"></li>
                <li><img src="img/3.jpg"></li>
                <li><img src="img/4.jpg"></li>
                <li><img src="img/2.jpg"></li>
            </ul>
        </p>

    </body></html>

相关推荐:

JS无缝滚动

彻底搞懂JS无缝滚动代码_javascript技巧

js怎么实现文字列表无缝滚动?

以上就是js无缝滚动的实例分享的详细内容,更多请关注php中文网其它相关文章!

  • 相关标签:javascript 分享 实例
  • 本文原创发布php中文网 ,转载请注明出处,感谢您的尊重!
  • 相关文章


  • 原生javascript实现分享到朋友圈功能 支持ios和android_javascript技巧
  • jQuery链式调用与show知识浅析_jquery
  • JS实现登录页面记住密码和enter键登录方法推荐_javascript技巧
  • BootstrapTable与KnockoutJS相结合实现增删改查功能【一】_javascript技巧
  • 网友评论

    文明上网理性发言,请遵守 新闻评论服务协议

    我要评论
    独孤九贱(4)_PHP视频教程

    独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    相关视频教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 相关视频章节