Wie verwendet JavaScript DOM, um Bilder zu wechseln?-js-Tutorial-php.cn

Wie verwendet JavaScript DOM, um Bilder zu wechseln?

不言

Freigeben： 2018-07-21 09:54:01

Original

2472 Leute haben es durchsucht

In diesem Artikel erfahren Sie, wie Sie mit JavaScript Bilder mithilfe von DOM wechseln können. , der Inhalt ist sehr gut, Freunde in Not können sich darauf beziehen, ich hoffe, es kann allen helfen.

Beginnen Sie noch heute mit dem Erlernen von DOM-Operationen.

DOM: Dokumentobjektmodell (Dokumentobjektmodell)

Gemäß id Seitenelemente abrufen: Zum Beispiel: var xx = document.getElementById("id");

Elemente basierend auf dem -Tag abrufen: Zum Beispiel : var xx = document .getElementsByTagName("p");

src="imgs/1.png"/><br>    <button id="btn1" type="button" value="

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #outer {
            width: 500px;
            /*设置上边距50px 水平居中*/
            margin: 50px auto;
            /*设置边框*/
            padding: 10px;
            background-color: greenyellow;
            /*设置文本居中*/
            text-align: center;
        }

        img {
            width: 500px;
        }
    </style>


    <script>
　　　　　//btn 为按钮id   clickEventFunction 为点击后执行的操作函数
        function addClick(btn, clickEventFunction) {
            var myButton = document.getElementById(btn);
            myButton.onclick = clickEventFunction;
        };

        window.onload = function () {
            (function () {
                var pics = ["imgs/1.png",
                    "imgs/2.png",
                    "imgs/3.png"];
                var index = 0;
                showPicNum(index);
                var img = document.getElementsByTagName("img")[0];

                // var btn1 = document.getElementById("btn1");
                var btn2 = document.getElementById("btn2");
                addClick("btn1", function () {
                    index--;
                    if (index <= -1) {
                        index = pics.length - 1;
                    }
                    console.log(index + " ----- ");
                    img.src = pics[index];
                    showPicNum(index);
                });
                addClick("btn2", function () {
                    index++;
                    if (index >= pics.length) {
                        index = 0;
                    }
                    console.log(index + " ++++++++ ");
                    img.src = pics[index];
                    showPicNum(index);
                });

                //
                // btn1.onclick = function () {
                //     index --;
                //     if(index <= -1){
                //         index = pics.length - 1;
                //     }
                //     console.log(index  + " ----- ");
                //     img.src = pics[index];
                //     showPicNum(index);
                // };
                // btn2.onclick = function () {
                //     index ++;
                //     if(index >= pics.length){
                //         index = 0;
                //     }
                //     console.log(index  + " ++++++++ ");
                //     img.src = pics[index];
                //     showPicNum(index);
                // };
                console.log(index);

                /**
                 * 展示当前图片为第几张
                 * @param index   当前图片索引
                 */
                function showPicNum(index) {
                    var descrs = document.getElementById("discs");
                    descrs.innerText = "一共" + pics.length + "张图片,当前第" + ++index + "张";
                }
            }())
        };
    </script>
</head>
<body>
<div id="outer">
    <p id="discs"></p>
    <img src="imgs/1.png"/><br>
    <button id="btn1" type="button" value="上一张">上一张</button>
    <button id="btn2" type="button" value="下一张">下一张</button>
</div>
</body>
</html>

Nach dem Login kopieren

Dokumentenverzeichnis:

Weitere Analyse des JS-Umfangs und objektorientiert

Wie js die Methode zum Hochladen und Komprimieren von Bildern implementiert

Das obige ist der detaillierte Inhalt vonWie verwendet JavaScript DOM, um Bilder zu wechseln?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!