快捷導(dǎo)航

javascript實現(xiàn)點擊按鈕切換圖片

更新時間：2021年08月24日 10:16:50 作者：Code-Jie

這篇文章主要為大家詳細(xì)介紹了javascript實現(xiàn)點擊按鈕切換圖片，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了javascript實現(xiàn)點擊按鈕切換圖片的具體代碼，供大家參考，具體內(nèi)容如下

效果圖：

首先搭建基本的結(jié)構(gòu)

<div id="div">
        <p id="desc"></p>
        <!--默認(rèn)顯示第一張圖片-->
        <img src="img/1.jpg" alt="加載失敗" style="width: 800px;height: 400px;">
        <button id="pre">上一張</button>
        <button id="next">下一張</button>
</div>

其次設(shè)置顯示的樣式

<style>
        * {
            margin: 0;
            padding: 0;
        }
    
        #div {
            width: 800px;
            height: 420px;
            margin: 20px auto;
            background-color: rgb(243, 119, 36);
            text-align: center;
        }
    
        button:hover {
            cursor: pointer;
        }
</style>

最重要的JavaScript部分

<script>
        //預(yù)加載,等頁面加載完畢后，再執(zhí)行腳本
        window.onload = function () {
         
            var num = document.getElementsByTagName("img")[0];
            //這里雖然只有一個img標(biāo)簽，但是num變量的結(jié)果依然是一個數(shù)組
            
            //定義圖像地址
            var shuzu = ["img/1.jpg", "img/2.jpg", "img/3.jpg", "img/4.jpg", "img/5.jpg", "img/6.jpg", "img/7.jpg", "img/8.jpg", "img/9.jpg", "img/10.jpg", "img/11.jpg", "img/12.jpg"];

            //獲取按鈕
            var prev = document.getElementById("pre");
            var next = document.getElementById("next");
            var index = 0;
            
            //圖片描述
            var p_desc = document.getElementById("desc");
            p_desc.innerHTML = "一共" + shuzu.length + "張圖片" + ",當(dāng)前是第" + (index + 1) + "張";
            //注意此處前面是字符串的拼接，實現(xiàn)加法需要用到括號
            
            //點擊切換圖片
            prev.onclick = function () {
                index--;
                //此處讓它循環(huán)
                if (index < 0)
                    index = shuzu.length - 1;
                num.src = shuzu[index];
                p_desc.innerHTML = "一共" + shuzu.length + "張圖片" + ",當(dāng)前是第" + (index + 1) + "張";//注意此處前面是字符串的拼接，實現(xiàn)加法需要用到括號
            }

            next.onclick = function () {
                index++;
                if (index > shuzu.length - 1)
                    index = 0;
                num.src = shuzu[index];
                p_desc.innerHTML = "一共" + shuzu.length + "張圖片" + ",當(dāng)前是第" + (index + 1) + "張";//注意此處前面是字符串的拼接，實現(xiàn)加法需要用到括號
            }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: