JavaScript学习之自动轮播图片

定时器

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

JavaScript学习之自动轮播图片

定时器

在实现轮播图之前需要首先了解一下JavaScript的定时器 setInterval()和clearInterval()

切换图片

图片自动轮播

猜你喜欢