前端JS -定时器实现图片无缝滚动

Summer1991ZX

于 2019-10-12 11:10:08 发布

阅读量1k

点赞数

分类专栏：前端文章标签：前端 JS 定时器动态移动

本文链接：https://blog.youkuaiyun.com/Summer1991ZX/article/details/102516733

版权

本文介绍了如何利用JavaScript的setTimeout和setInterval来创建一个图片无缝滚动的效果。通过设置定时器，实现图片的动态移动，同时提到了清除定时器的方法clearTimeout和clearInterval，以确保滚动的平滑和可控。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Js定时器

设置定时器分为两种：
一种是setTimeout（只实现一次），一种是setInterval（反复执行）
删除定时器：clearTimeout 或者clearInterval
下面demo是用定时器实现一个图片移动的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box{
    
            width: 100px;
            height: 100px;
            background: greenyellow;
            position: fixed;
            left:0px;
            top:100px;
                
            }
    </style>

    <script>
        /* 获取容器Id-->设置定时器-->设置初始位置-->设置移动距离--->定义函数-->将移动距离赋值给容器的位置 */
        window.onload = function(){
    
        
            var oDiv = document.getElementById('box');
            var oTimer  =  setInterval(fnMove,30);
            var iLeft =  0;
            var iSpeed = 3;

            function fnMove(){
    
                iLeft += iSpeed;
                oDiv.style.left = iLeft + "px";
            
            if(iLeft > 600){
    
                iSpeed = -3;
            }