實作效果：

初級輪播圖

原始碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初級輪播圖</title>

    <style>
        div{
            width: 300px;
            height: 300px;
            border: 3px solid skyblue;
            background-size: 100% auto;
        }
    </style>

</head>
<body>

<button>修改一</button>
<button>修改二</button>
<button>修改三</button>
<button>修改四</button>
<button>修改</button>
<div></div>

<script>
    // 獲取
    var btn = document.getElementsByTagName("button");
    var box = document.getElementsByTagName("div")[0];

    // 單個按鈕切換背景圖
    btn[0].onclick = function () {
        box.style.backgroundImage = "url('輪播圖的圖片/1.jpg')";
    }
    btn[1].onclick = function () {
        box.style.backgroundImage = "url('輪播圖的圖片/2.jpg')";
    }
    btn[2].onclick = function () {
        box.style.backgroundImage = "url('輪播圖的圖片/3.jpg')";
    }
    btn[3].onclick = function () {
        box.style.backgroundImage = "url('輪播圖的圖片/5.jpg')";
    };

    // 修改按鈕切換多張背景圖
    var num = 0;  // 點擊次數
    btn[4].onclick = function () {
        num++;
        if(num%4==1) {
            box.style.backgroundImage = "url('輪播圖的圖片/1.jpg')";
        }else if(num%4==2){
            box.style.backgroundImage = "url('輪播圖的圖片/2.jpg')";
        }else if(num%4==3){
            box.style.backgroundImage = "url('輪播圖的圖片/3.jpg')";
        }else{
            box.style.backgroundImage = "url('輪播圖的圖片/5.jpg')";
        }
    }

</script>

</body>
</html>

👇🏻可通過點擊下面——>關注本人運營 公眾號👇🏻

公眾號后臺回復【初級輪播圖】，可得本小創作原始碼&&所有圖片~ 【可以公眾號里私聊并標明來自CSDN，會拉你進入技術交流群（群內涉及各個領域大佬級人物，任何問題都可討論~）--->互相學習&&共同進步（非誠勿擾）】

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/357138.html

標籤：其他

上一篇：多維陣列降維的幾種方法

下一篇：純前端實作—“王者榮耀開局十秒倒計時效果”

純前端實作—初級輪播圖

實作效果：

原始碼：