HTML纯javaScript代码写图片轮播

Posted 春风自是人间客

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML纯javaScript代码写图片轮播相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            .imgbox {
                width: 100%;
                height: 400px;
                position: relative;
                top: 20px;
                left: 15px;
            }
            
            img {
                opacity: 0;
                position: absolute;
                max-height: 400px;
                max-width: 300px;
            }
        </style>
    </head>

    <body>
        <div class="imgbox" id="imgbox">
            <img src="img/19.jpg" style="opacity: 1;" alt="" />
            <img src="img/20.jpg" alt="" />
            <img src="img/21.jpg" alt="" />
            <img src="img/22.jpg" alt="" />
            <img src="img/23.jpg" alt="" />
            <img src="img/24.jpg" alt="" />
        </div>
        <input type="button" value="切换" onclick="change()" />
        <script>
        //全局地址
            var index = 0;

            function change() {
                //得到所 有图片长度
                var imgs = document.getElementsByTagName("img").length;
                var next = index + 1;
                if (index == imgs - 2) {
                    //imgs-1为长度（从0开始）；imgs-2为index（next+1）
                    next = 0;
                }
                //得到所有图片元素
                var img = document.getElementById("imgbox").children;
                img[index].style.opacity = 0;
                img[next].style.opacity = 1;
                index = next;
                console.log(index);
            }
            window.setInterval("change()", 2000);
        </script>
    </body>

</html>

 

以上是关于HTML纯javaScript代码写图片轮播的主要内容，如果未能解决你的问题，请参考以下文章

网页HTML代码制作轮播图效果

每日一题_JavaScript.利用纯JavaScript Dom Core实现一个图片轮播效果 ?

网页设计中如何让图片轮播

JavaScript学习---自己动手写的图片轮播

纯原生javascript仿网易轮播图

跪求类似图里这样的图片轮播代码，最好是没有js的纯HTML的，越简单的越好