zoukankan      html  css  js  c++  java
  • 左右无缝滚动

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <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 aLi=oUl.getElementsByTagName('li');
        
        var speed=-2;
        
        //oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
        oUl.innerHTML+=oUl.innerHTML;
        oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//ul的宽度等于li的宽度乘以li个数
        
        function move(){
            if(oUl.offsetLeft<-oUl.offsetWidth/2)//判断图片是否滚动到一半
            {
                oUl.style.left='0';//滚动到一半的时候把它拉回来到初始的位置
            }
            if(oUl.offsetLeft>0)//当发现left大于0的时候
            {
                oUl.style.left=-oUl.offsetWidth/2+'px'; //迅速把它拉回来到一半的位置
            }
            oUl.style.left=oUl.offsetLeft+speed+'px';
        }
        var timer=setInterval(move, 30);
        
        oDiv.onmouseover=function ()
        {
            clearInterval(timer);//鼠标移入清除定时器
        };
        
        oDiv.onmouseout=function ()
        {
            timer=setInterval(move, 30);//鼠标移出设置定时器
        };
        
        document.getElementsByTagName('a')[0].onclick=function ()
        {
            speed=-2;//左边箭头
        };
        document.getElementsByTagName('a')[1].onclick=function ()
        {
            speed=2;//右边箭头
        };
    };
    </script>
    </head>
    
    <body>
    <a href="javascript:;">向左走</a>
    <a href="javascript:;">向右走</a>
    <div id="div1">
        <ul>
            <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>

    物体运动基础
    让Div移动起来 offsetLeft的作用
    用定时器让物体连续移动

    效果原理
    让ul一直向左移动
    复制li innerHTML和+=
    修改ul的width
    滚动过界后,重设位置 判断过界

    改变滚动方向
    修改speed
    修改判断条件 鼠标移入暂停 移入关闭定时器 移出重新开启定时器

  • 相关阅读:
    Promise对象
    iterator和for of 循环
    vue项目基本流程
    BASH_SOURCE 用法
    Java GC CMS 日志分析
    zookeeper 删除snapshot和transaction log的源码解读
    openresty nginx 安装过程记录
    opentesty--luasocket 安装
    为什么要使用SLF4J而不是Log4J
    要过一遍的博客列表
  • 原文地址:https://www.cnblogs.com/Xuman0927/p/6026938.html
Copyright © 2011-2022 走看看