JS练习：替换式图片自动轮播

最新推荐文章于 2021-08-22 20:08:02 发布

weixin_34061042

最新推荐文章于 2021-08-22 20:08:02 发布

阅读量137

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/believepd/p/10012543.html

本文分享了一段使用HTML和JavaScript实现图片自动轮播的代码。通过设置定时器，每隔三秒，页面上的图片会自动切换到下一张，实现了简单的图片轮播效果。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <script>
        var index = 0;

        function changeImg() {
            // 获得要切换图片的那个元素
            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()", 3000);
        }
    </script>
</head>
<body onload="init()">
    <img src="img/1.jpg" width="1920" id="img1"/>
</body>
</html>