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

更新时间：2021年05月18日 10:59:28 作者：Cookie_fzx

这篇文章主要为大家详细介绍了JavaScript定时器实现无缝滚动图片，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了JavaScript实现无缝滚动图片的具体代码，供大家参考，具体内容如下

文本：

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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

js窗口关闭提示信息（兼容IE和firefox）
这篇文章主要介绍了当关闭窗口的时候，显示窗口提示信息，友好的进行提示，防止丢失重要信息，需要的朋友可以参考一下
2015-10-10
JavaScript冒泡算法原理与实现方法深入理解
这篇文章主要介绍了JavaScript冒泡算法,结合实例形式详细分析了JavaScript冒泡算法基本原理、实现方法与相关注意事项,需要的朋友可以参考下
2020-06-06
xml 封装与解析(javascript和C#中)
xml 封装与解析 javascript和C#中的分别实现代码。
2009-07-07
JS实现快递单打印功能【推荐】
这篇文章主要介绍了JS实现快递单打印功能,给大家介绍了js网页打印的几种方法，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-06-06
webpack配置的最佳实践分享
在网上看到很多人都写了“webpack最佳实践方案”，适合的才是“最佳”的，在这里总结一下自己在工作过程中总结出来的最佳实践，所以本文主要介绍了关于webpack配置的相关资料，需要的朋友们可以参考借鉴，下面来一起看看吧。
2017-04-04
JavaScript判断日期时间差的实例代码
本文通过实例代码给大家介绍了js判断日期时间差的方法，文章给大家补充介绍了js求时间差的代码，需要的朋友参考下吧
2018-03-03
javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版
javascript 文字上下间隔滚动的代码符合WEB标准脚本之家修正版，这里提供了两个版本，第二个在firefox下运行有些问题大家可以修改下，第一个的高度问题，已经修正，其实就是简单的加了css样式。
2009-12-12
javascript实现倒计时（精确到秒）
本文给大家分享的是个人项目中使用的javascript实现的精确到秒级的倒计时代码，十分的实用，有需要的小伙伴可以参考下。
2015-06-06
一文让你快速了解JavaScript栈
这篇文章主要介绍了一文让你快速了解JavaScript栈，栈全称为堆栈，是一种先进后出的的数据结构，栈中只有两种基本操作，也就是插入和删除，也就是入栈和出栈操作，栈只有一端可以进行入栈和出栈操作，我们将其称为栈顶，另一端称其为栈底
2022-07-07
DOM中事件处理概览与原理的全面解析
这篇文章主要为大家详细解析了DOM中事件处理概览与原理，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08