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、轮播图效果

     三张图片每隔三秒切换一次
  • 相关阅读:
    解决iex -S mix报错
    OTP服务器
    多进程
    字符串与二进制
    IphoneX适配正确姿势
    Babel 配置用法解析
    babel版本变化
    你好，babel
    XSS攻击 && CSRF攻击 基础理解
    小程序开发初体验~
  • 原文地址：https://www.cnblogs.com/zhai1997/p/12218795.html
Copyright © 2011-2022 走看看