Maison > interface Web > js tutoriel > le corps du texte

Comment JavaScript utilise-t-il DOM pour changer d'image ?

不言
Libérer: 2018-07-21 09:54:01
original
2444 Les gens l'ont consulté

Cet article vous explique comment utiliser JavaScript pour changer d'image à l'aide de DOM ? , le contenu est très bon, les amis dans le besoin peuvent s'y référer, j'espère que cela pourra aider tout le monde.

Commencez à apprendre les opérations DOM aujourd'hui. Écrivons un petit cas pour consolider les points de connaissances.

DOM : modèle objet de document (modèle objet de document)

Selon id Obtenir les éléments de la page : Par exemple : var xx = document.getElementById("id");

Obtenir des éléments basés sur la balise  : Par exemple : 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>
Copier après la connexion



Répertoire des documents :

Recommandé :

Analyse plus approfondie de la portée JS et orientée objet

上一张">上一张</button>    <button id="btn2" type="button" value="下一张">下一张</button></div></body></html>
Copier après la connexion

Comment implémenter la méthode de téléchargement et de compression des images en js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!