当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript学习之自动轮播图片

JavaScript学习之自动轮播图片

2019年04月17日  | 移动技术网IT编程  | 我要评论

定时器

在实现轮播图之前需要首先了解一下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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网