JavaScript はどのように DOM を使用して画像を切り替えますか?-jsチュートリアル-php.cn

JavaScript はどのように DOM を使用して画像を切り替えますか?

不言

リリース： 2018-07-21 09:54:01

オリジナル

2443 人が閲覧しました

この記事では、JavaScript を使用して DOM を使用して画像を切り替える方法を説明します。、内容はとても良いので、困っている友達が参考にすることができ、みんなに役立つことを願っています。

今日から DOM 操作の学習を始めましょう。知識ポイントを統合するための小さなケースを作成しましょう。

DOM: ドキュメントオブジェクトモデル (ドキュメントオブジェクトモデル)

id に基づいてページ要素を取得します。例: var xx = document。 getElementById ("id");

tag に基づいて要素を取得します: 例: 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>

ログイン後にコピー

ドキュメントディレクトリ:

効果は次のとおりです:

上一张">上一张</button>    <button id="btn2" type="button" value="下一张">下一张</button></div></body></html>

ログイン後にコピー

php 8、私も来ます

ウェブサイトのレイアウトを 30 分で学ぶ

ビデオチュートリアルに精通したOracleの入門

あなたの最初のUNI-APPコード

ゼロからアプリの起動までフラッター

兄弟連新版Linuxビデオチュートリアル

AXURE 9 ビデオチュートリアル (プロダクトマネージャーのインタラクティブな製品設計 UI に適しています)

基礎能力ゼロ PS ビデオチュートリアル

16日間のUIビデオチュートリアル

PS テクニックとスライステクニックのビデオチュートリアル

アリクラウド環境構築およびプロジェクトオンラインビデオチュートリアル

コンピュータネットワークの概要 - プログラマが身につけるべき基礎知識

プログラマーのための基本チュートリアル - HTTP プロトコルの説明

Websocket ビデオチュートリアル

JavaScript はどのように DOM を使用して画像を切り替えますか?