轮播图

最新推荐文章于 2022-03-22 20:11:58 发布

凌虚95

最新推荐文章于 2022-03-22 20:11:58 发布

阅读量150

点赞数

文章标签： js

本文链接：https://blog.csdn.net/weixin_45849948/article/details/105902492

版权

题目

制作一个轮播图

分析

制作轮播图主要需要使用定时器来计算每隔多长时间来进行一次图片的变换

程序代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    
    <script>
        var number = 1;
        function changeImg(){
            number ++;
            if(number > 3){
                number = 1;
            }
            document.getElementById("banner").src = "img/banner_"+number+".jpg";
        }


        setInterval(changeImg,3000);

    </script>
    
</head>
<body>
    <img id="banner"  src="img/banner_1.jpg" width="100%">
</body>
</html>