欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript学习之自动轮播图片

程序员文章站 2022-09-10 13:59:54
定时器 在实现轮播图之前需要首先了解一下JavaScript的定时器 setInterval()和clearInterval() 1、setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式 setInterval() 方法会不停地调用函数,直到 clearInterval ......

定时器

在实现轮播图之前需要首先了解一下javascript的定时器 setinterval()和clearinterval()

1、setinterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式
setinterval() 方法会不停地调用函数,直到 clearinterval() 被调用或窗口被关闭。由 setinterval() 返回的 id 值可用作 clearinterval() 方法的参数
语法:

setinterval(code, milliseconds);

2、clearinterval() 方法可取消由 setinterval() 函数设定的定时执行操作,clearinterval() 方法的参数必须是由 setinterval() 返回的 id 值
语法:

clearinterval(id_of_setinterval)

实例

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function test(){
                console.log("setinterval 调用了");
            }
            var timerid;
            function startdinshiqi(){
                timerid = setinterval("test()",2000);
            }
            
            function stopdingshiqi(){
                clearinterval(timerid);
                
            }
            
        </script>
    </head>
    <body>
        <input type="button" value="开启定时器" onclick="startdinshiqi()" /><br />
        <input type="button" value="取消定时器" onclick="stopdingshiqi()"/><br />
    </body>
</html>

切换图片

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>

            function changeimg(){
//              alert("要切换了")
                var img = document.getelementbyid("img1");
                img.src = "../img/2.jpg";
            }
        </script>
    </head>
    <body>
        <input type="button" value="点击切换图片" onclick="changeimg()" />
        <br />
        <img src="../img/1.jpg" id="img1" />
    </body>
</html>

图片自动轮播

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <script>
            var index = 0;
            
            function changeimg(){
                
                //1. 获得要切换图片的那个元素
                var img = document.getelementbyid("img1");
                
                //计算出当前要切换到第几张图片
                var curindex = index%3 + 1;  //0,1,2 
                img.src="../img/"+curindex+".jpg";  //1,2,3
                //每切换完,索引加1
                index = index + 1;
            }
            
            function init(){
                
                setinterval("changeimg()",1000);
            }
            
        </script>
    </head>
    <body onload="init()">
        <img src="../img/1.jpg" width="100%" id="img1"/>
    </body>
</html>