zoukankan html css js c++ java

js：轮播图（获取属性、setInterval函数）

1、轮播图的函数

        <script>
            function init(){
                setInterval("changeImg()",3000);
            }
            var i=0
            function changeImg(){
                i++;
                document.getElementById("img").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>

其中：setInterval("changeImg()",3000);的作用是3000ms执行一次 changeImg()函数，在 changeImg()函数中， document.getElementById("img").src="../img/"+i+".jpg"; 是在给img属性赋值（图片的路径）。

    <body onload="init()">
        
            <div id="">
                <img src="../img/1.jpg" width="100%" id="img"/>
            </div>
    
    </body>

2、完整轮播图代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <style>
            @import url("/css/lunbo.css");
        </style>
        <script>
            function init(){
                setInterval("changeImg()",3000);
            }
            var i=0
            function changeImg(){
                i++;
                document.getElementById("img").src="../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body onload="init()">
        
            <div id="">
                <img src="../img/1.jpg" width="100%" id="img"/>
            </div>
    
    </body>
</html>

3、项目结构

4、轮播图效果

三张图片每隔三秒切换一次

查看全文

相关阅读:
codeforces round #433 div2
bzoj1951
bzoj3620
bzoj2286
bzoj1513
bzoj4390
codeforces round 430 div 2
bzoj3339
准备实现体积蒙皮
 看牛顿法的改进与验证局部收敛

原文地址：https://www.cnblogs.com/zhai1997/p/12218795.html