JavaScript复习使用定时器的简易式诸葛大力轮播图_定时器简单的轮播图代码-优快云博客

先上效果图

在这里插入图片描述

很简单的代码

先创建个文件夹保存成果的照片，然后通过更改src来用定时器循环这些照片
在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
</head>
    <!-- 
        setTimeout(方法或者代码块,时间ms); //在指定的毫秒数后调用函数或计算表达式  可返回一个id
        clearTimeout()  clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。    
                        clearTimeout()方法的参数必须是由setTimeout()返回的ID值。
        setInterval(方法或者代码块,执行代码的间隔);//方法可按照指定的周期（以毫秒计）来调用函数或计算表达式 可返回一个id
        clearInterval(id) clearInterval() 方法可取消由 setInterval() 设置的 interval。
                        clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值

     -->
<body>
    
    <img src="img/1.jpeg" width="30%" id="imgs" style="margin-left: 35vw;">
    <script>
        var i=1;
        function f(){
            var imgs=document.getElementById("imgs");
            i++;
            if(i>4){
                i=1;
            }
            imgs.src="img/"+i+".jpeg";
        }
        setInterval(f,2000);

    </script>
    

</body>

</html>