自动轮播图实现和代码

最新推荐文章于 2024-05-01 02:45:35 发布

Java_Super_white

最新推荐文章于 2024-05-01 02:45:35 发布

阅读量739

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/Java_Super_white/article/details/121883341

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        img{
            width: 460px;
            height: 240px;
        }
        *{
            text-align: center;
        }

    </style>
</head>
<body>
<div id="goG" onclick="next()">

</div>
</body>
<script>
    var imgList =["../img/11.jpg","../img/22.jpg","../img/33.jpg","../img/44.jpeg"];
    var num= 0;
    function next() {
        num++;
        if (num === 4) {
            //循环到了最后一次图片了
            num = 0;//下标从零开始
        }

        var oldNode = document.getElementById("goG").nextElementSibling;
        var newNode = document.createElement("img");
        newNode.setAttribute("src", imgList[num]);
        oldNode.parentNode.replaceChild(newNode, oldNode);
        document.getElementById("goG").innerHTML;
        document.getElementById("goG").style.display = "none";
        document.getElementById("goG").style.display = "block"
    }
    window.setInterval("next()",1000)
</script>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Java_Super_white

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
自动轮播图实现和代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>轮播图</title> <style> img{ width: 460px; height: 240px; } *{ text-align: .
复制链接

扫一扫