纯净、安全、绿色的下载网站

首页

当前位置:首页IT学院IT技术

js无缝滚动图片 JavaScript定时器实现无缝滚动图片

Cookie_fzx   2021-05-18 我要评论
想了解JavaScript定时器实现无缝滚动图片的相关内容吗,Cookie_fzx在本文为您仔细讲解js无缝滚动图片的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:js无缝滚动图片,js无缝滚动,js滚动图片,下面大家一起来学习吧。

文本:

  • setInterval 开启间隔型定时器
  • clearTimeout 关闭定时器
  • offsetWidth 获取宽度
  • offsetLeft 获取向左偏移量
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无缝移动</title>
    <style>
        *{margin: 0;   padding: 0;}
        #div1{width:520px;  height:170px; margin:20px auto; position: relative;   /* !!!  div1 的位置是相对的  */
                background: pink;   overflow: hidden}    /* !!!    overflow: hidden    */
        #div1  ul{position: absolute; left:0;  top:0;}      /* !!!  ul 的 position:绝对的,控制left的值   */
        #div1 ul li{float:left; width:130px; height:170px; 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;    // 相当于 4*2 张图像在移动
            oUl.style.width=aLi[0].offsetWidth  *  aLi.length  +  'px';   //  !!!!!!   offsetWidth

            function Move() {
                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
            }

            var Timer1= 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>
<a href="javascript:;" >向左移动</a>
<a href="javascript:;" >向右移动</a>
    <div id="div1">
        <ul>
            <li><img src="img/aa.jpg"/></li>
            <li><img src="img/bb.jpg"/></li>
            <li><img src="img/cc.jpg"/></li>
            <li><img src="img/dd.jpg"/></li>
        </ul>
    </div>
</body>
</html>

相关文章

猜您喜欢

  • C++编译器Clion使用 C++编译器Clion的使用详解(总结)

    想了解C++编译器Clion的使用详解(总结)的相关内容吗,我是小白呀,在本文为您仔细讲解C++编译器Clion使用的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:C++编译器Clion使用,C++编译器Clion,下面大家一起来学习吧。..
  • Python AdaBoost算法 Python机器学习之AdaBoost算法

    想了解Python机器学习之AdaBoost算法的相关内容吗,ProChick在本文为您仔细讲解Python AdaBoost算法的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点:Python,AdaBoost算法,Python机器学习,下面大家一起来学习吧。..

网友评论

Copyright 2022 版权所有 软件发布

声明:所有软件和文章来自软件开发商或者作者 如有异议 请与本站联系 联系我们