使用JS简单的完成轮播图

最新推荐文章于 2022-11-23 16:57:23 发布

@班

最新推荐文章于 2022-11-23 16:57:23 发布

阅读量363

点赞数

分类专栏： js 文章标签： JS 轮播图

本文链接：https://blog.csdn.net/weixin_43273271/article/details/100980529

版权

js 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

使用JS完成轮播图

所需知识
步骤分析
案例代码

所需知识

setInterval(code,time)
setInterval 相当于一个时钟，code是指调用的代码，time是指执行间隔时间，以毫秒为单位。

步骤分析

确定事件，并为其创建一个函数，通过变量方式来循环设置src属性。
时钟绑定这个函数
设置时间

注意：到最后一张图片的时候，变量应该被重置，

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var i = 1;
        function init() {
            setInterval("chang()",3000);
        }
        function chang() {
            i++;
            document.getElementById("mg").src="img/09/"+i+".jpg"
            if (i == 6){
                i=1;
            }
        }
    </script>
</head>
<body onload="init()">
<div>
    <img src="img/09/1.jpg" id="mg">
</div>
</body>
</html>