您正在使用IPV4(34.204.180.223)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 建军节 3
2021年 七夕节 16
2022年 元 旦 156
2022年 春 节 187
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript定时器实现无缝滚动图片
    内容摘要: setInterval开启间隔型定时器clearTimeout关闭定时器offsetWidth获取宽度offsetLeft获取向左偏移量!DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'title无缝移动/titlestyle*{margin:0;padding:0;}#div1{width:520px;heig......
    setInterval开启间隔型定时器

    clearTimeout关闭定时器

    offsetWidth获取宽度

    offsetLeft获取向左偏移量

    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <title>无缝移动</title>

    <style>

    *{margin:0;padding:0;}

    #div1{width:520px;height:170px;margin:20pxauto;position:relative;/*!!!div1的位置是相对的*/

    background:pink;overflow:hidden}/*!!!overflow:hidden*/

    #div1ul{position:absolute;left:0;top:0;}/*!!!ul的position:绝对的,控制left的值*/

    #div1ulli{float:left;width:130px;height:170px;list-style:none}

    </style>

    <script>

    window.onload=function(){

    varoDiv=document.getElementById('div1');

    varoUl=oDiv.getElementsByTagName('ul')[0];

    varaLi=oUl.getElementsByTagName('li');

    varspeed=2;


    oUl.innerHTML+=oUl.innerHTML;//相当于4*2张图像在移动

    oUl.style.width=aLi[0].offsetWidth*aLi.length+'px';//!!!!!!offsetWidth


    functionMove(){

    if(oUl.offsetLeft<-oUl.offsetWidth/2){//移动到左边的一半就回来

    oUl.style.left='0';

    }

    if(oUl.offsetLeft>0){////移动到右边的一半就回来

    oUl.style.left=-oUl.offsetWidth/2+'px';

    }

    oUl.style.left=oUl.offsetLeft+speed+'px';//!!!!!!!!offsetLeft

    }


    varTimer1=setInterval(Move,30);//setInterval开启间隔型定时器

    oDiv.onmouseover=function(){

    clearTimeout(Timer1);

    };

    oDiv.onmouseout=function(){

    Timer1=setInterval(Move,30);

    };


    document.getElementsByTagName('a')[0].onclick=function(){

    speed=-2;//向左的速度

    };

    document.getElementsByTagName('a')[1].onclick=function(){

    speed=2;//向右的速度

    };

    };

    </script>


    </head>

    <body>

    <ahref="javascript:;">向左移动</a>

    <ahref="javascript:;">向右移动</a>

    <divid="div1">

    <ul>

    <li><imgsrc="img/aa.jpg"/></li>

    <li><imgsrc="img/bb.jpg"/></li>

    <li><imgsrc="img/cc.jpg"/></li>

    <li><imgsrc="img/dd.jpg"/></li>

    </ul>

    </div>

    </body>

    </html>

    版权声明:本内容来源于互联网,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
    上一篇:利用JS定时器实现元素移动 下一篇:文本框只能输入数字网页代码
    发布日期:2021/7/21
    手机扫二维码直达本页
    发布时间:15:31:28
    点击:91
    录入:齐天大圣
    相关文章
    Baidu

    YiJiaCMS V5.9 Build 21.7.20(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021