js实现简单的轮播图效果-蒲公英云

js实现简单的轮播图效果

港控/mmm° 2023-02-13 05:54 107阅读 0赞

window.setInterval(code,millisec)按照指定的周期(间隔)来执行函数或代码段。
参数1：code必须。执行的函数名或者执行的代码段
参数2：millisec必须。间隔时间，即周期。单位毫秒。
window对象提供的都是全局函数,调用函数时可将window省略。

第一步：确定事件(onload)并为其绑定一个函数
第二步：编写事件触发函数
第三步：编写定时任务(setInterval)
第四步：编写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style> .images { width: 500px; height: 500px; margin: auto; border: 1px solid red; } </style>
    <script> //页面加载完调用init函数 window.onload = init; function init() { //启用定时器 window.setInterval("changImg()",2000); } var i = 1; function changImg() { i++; document.getElementById("img").src = "images/"+i+".jpg"; if(i > 24) { i = 0; } } </script>
    <body>
        <div class="images">
            <img src="images/1.jpg" id="img">
        </div>
    </body>
</html>