js 函数轮播图案例

    科技2022-07-17  127

    函数是命名的独立的语句段,这个语句段可以被当作一个整体来引用和执行:

    格式:

    function 函数名(形式参数){函数体} 调用函数:函数名(实际参数); //声明一个函数 function get(a,b){ console.log(a,b) } get(3,4)//调用

    注意: 1、函数只有被调用后才会执行

    2、如果函数需要返回值、直接使用return 返回

    <script type="text/javascript"> // 定义一个函数 : function function demo2() { return 666; } // 调用函数 : alert(demo2()); </script>

    3.如果函数需要传递参数、不需要指定参数的类型、直接使用变量即可

    <script type="text/javascript"> // 定义一个函数 : function function demo3(a, b) { return a + b; } // 调用函数 : alert(demo3(10, 20));//显示30 </script>

    4、js中出现二个重名的函数名、后者会把前面的覆盖掉

    演示:

    <script type="text/javascript"> // 定义一个函数 : function function demo4(a, b) { alert("调用1..."); } function demo4() { alert("调用2..."); } demo4(10, 20); demo4(); </script>

    会显示二次下面的图片:

    匿名函数

    匿名函数是没有名字的函数

    function(形式参数){函数体} 调用方式:将匿名函数赋值给一个变量,通过变量名调用函数 定义函数并赋值给变量:var fn = function(形式参数){函数体} 调用函数:fn(实际参数);

    演示:

    <script type="text/javascript"> // 匿名函数 : 没有名称的函数 var func = function(i, u) { alert(i + " love " + u); } // 调用函数 : func("柳岩", "小白");//显示柳岩love小白 </script>

    案例-轮播图

    <head> <meta charset="UTF-8"> <title>轮播图</title> <style> div { width: 80%; margin: 50px auto; } img { width: 100%; } </style> </head> <body> <div class="container"> <img src="../img/01.jpg" alt="图片"> </div> </body>

    实现1:

    <script> // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性. // 1. 获取 img 标签 var img = document.getElementById("img"); // alert(img); // 定义一个变量 var count = 1; // 1.2 定义一个函数 function changeImageSrc() { count++; img.src = "../img/0"+count+".jpg"; // 判断 if (count == 8) { count = 0; } } // 2. 循环切换图片 // window.setInterval(函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的函数. // 调用方式一 : // window.setInterval("changeImageSrc()", 1000); // 调用方式二 : window.setInterval(changeImageSrc, 1000); </script>

    实现2:

    <script> // 需求 : 动态获取页面中的 img 标签, 然后修改 img 标签的 src 属性. // 1. 获取 img 标签 var img = document.getElementById("img"); // alert(img); // 定义一个变量 var count = 1; // 2. 循环切换图片 // window.setInterval(匿名函数, 时间毫秒); 在指定的时间毫秒间隔, 不断调用第一个参数传入的匿名函数. window.setInterval(function() { count++; img.src = "../img/0"+count+".jpg"; // 判断 if (count == 8) { count = 0; } }, 1000); </script>
    Processed: 0.011, SQL: 8