JavaScript图片轮播效果

原创于 2016-12-02 23:26:43 发布 · 471 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

前端专栏收录该内容

35 篇文章

订阅专栏

本文详细介绍了如何利用JavaScript创建一个动态的图片轮播效果，包括设置定时器切换图片、添加左右箭头控制以及触发动画等关键步骤，旨在帮助开发者提升网页交互体验。

<body>
        <h2>自动播放图片</h2>
        <div id="did">
            <img src="./images/11.jpg" width="500" />
            <img src="./images/22.jpg" width="500" style="display:none" />
            <img src="./images/33.jpg" width="500" style="display:none" />
            <img src="./images/44.jpg" width="500" style="display:none" />
        </div>


    <script type="text/javascript">
        var m = 0;
        var list = document.getElementById("did").getElementsByTagName("img");

        function show(x) {
            for(var i = 0; i < list.length; i++) {
                if(i == x) {
                    list[i].style.display = "block";
                } else {
                    list[i].style.display = "none";
                }
            }

        }

        function running() {
            show(m);
            m++;
            if(m >= list.length) {
                m = 0;
            }
            //隔两秒调用一次running()方法
            setTimeout("running()", 2000);
        }

        //调用running方法
        running();
    </script>
</body>

这里写图片描述