JavaScript는 어떻게 DOM을 사용하여 이미지를 전환합니까?-JS 튜토리얼-php.cn

JavaScript는 어떻게 DOM을 사용하여 이미지를 전환합니까?

不言

풀어 주다： 2018-07-21 09:54:01

원래의

2476명이 탐색했습니다.

이 기사에서는 JavaScript를 사용하여 DOM을 사용하여 이미지를 전환하는 방법을 공유합니까? , 내용이 매우 좋고 도움이 필요한 친구들이 참고할 수 있으며 모든 사람에게 도움이 될 수 있기를 바랍니다.

오늘 DOM 작업 학습을 시작합니다. 지식 포인트를 통합하기 위한 작은 사례를 작성해 보겠습니다.

DOM: 문서 객체 모델(document object model)

#🎜🎜 #

id을 기준으로 페이지 요소 가져오기: 예: var xx = document.getElementById("id");

based # 🎜🎜# 태그

요소 가져오기: 예: 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>

로그인 후 복사

문서 디렉터리:
# 🎜🎜#　　　# 🎜🎜#

효과는 다음과 같습니다.

🎜🎜# JS 범위 및 객체 지향에 대한 추가 분석