JavaScript_DOM學習篇_圖片切換小案例

-Advertisement-

今天開始學習DOM操作,下麵寫一個小案例來鞏固下知識點. DOM: document object model (文檔對象模型) 根據id獲取頁面元素 :　如:　var xx = document.getElementById("id"); 根據標簽獲取元素:　如:　var xx = documen ...

今天開始學習DOM操作,下麵寫一個小案例來鞏固下知識點.

DOM: document object model (文檔對象模型)

根據id獲取頁面元素 :　如:　var xx = document.getElementById("id");

根據標簽獲取元素:　如:　var xx = document.getElementsByTagName("div");

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

<!DOCTYPE html>
<html lang="en">
<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>

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

OpenUDID 和 IDFA 比較

iOS標識符現今來比較下，不同情況下兩種標識符的變化情況。以下試驗，每種標識符均分為存於Keychain和未存於Keychain的兩種情況做比較。廣告標識符（IDFA-identifierForIdentifier），是AdSupport.framework裡面的。可以通過ASIdentifie ...
jQuery---ajax---error函數及其參數詳解

使用jquery的ajax方法向伺服器發送請求的時候，常常需要使用到error函數進行錯誤信息的處理，本文詳細說明瞭ajax中error函數和函數中各個參數的用法。一般error函數返回的參數有三個：function(jqXHR jqXHR, String textStatus, String e ...
Css Sprite(雪碧圖、精靈圖)<圖像拼合技術>

一、精靈圖使用場景：二、Css Sprite（優點）減少圖片的位元組。減少網頁的http請求，從而大大的提高頁面的性能。解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的製作效率。更換風格方便，只需要在一張或少張圖片上修改圖 ...
無可奈何的開始了jquery的“奇淫技巧”

轉載請註明出處： https://home.cnblogs.com/u/zhiyong-ITNote/ 修改一個已有的項目，主要是前端方面，一般的項目後端都是處理好了的，不需要改也不能改，除非特殊需求。然後就遇到了牛逼的代碼。本來看別人已有的代碼做開發就是一件很頭疼的事，一個函數一個方法一個屬性的找 ...
canvas 畫時鐘會動呦

//半徑 var r = 130; //重置原點 ctx.save(); ctx.translate(400, 500); //使用translate重置原點 function drawClock() { //畫時鐘不動的背景 //時鐘外圈 ... ...
【筆記】JS腳本為什麼要放在body最後面以及async和defer的異同點

1.沒有或`async` 瀏覽器遇到腳本的時候會暫停渲染並立即載入執行腳本（外部腳本），“立即”指的是在渲染該 script 標簽之下的文檔元素之前，也就是說不等待後續載入的文檔元素，讀到就載入並執行。因此如果將JS腳本放置在head的話會產生，並且腳本當中對於DOM的操作也會出現報錯，因為還沒 ...
React組件方法中為什麼要綁定this

如果你嘗試使用過進行前端開發，一定見過下麵這樣的代碼：構造方法中為什麼要給所有的實例方法綁定this呢？ 1. 代碼執行的細節上例僅僅是一個組件類的定義，當在其他組件中調用或是使用方法將其渲染到界面上時會生成一個組件的實例，因為組件是可以復用的，面向對象的編程方式非常適合它的定位。根據 th ...
vue使用樹形控制項z-tree，動態添加數據

環境：vue 2.9.3; webpack; 插件：z-tree,jquery(cnpm install xxxx) 問題;由於數據量比較多，需要動態載入數據，預設第一次請求的數據是最高一級，然後子集都是空。目標：點擊第一級查詢當前父節點的子集，並展開父節點下麵的子節點。實現方式：el-tree ...