亚洲日韩高清在线亚洲专区,国产成人精品一区二区免费看京,黄色成年视频,亚洲嫩模喷白浆在线观看自拍,亚洲精品国偷自产在线91正片

原生代碼之實(shí)現(xiàn)輪播圖（左右翻頁(yè)，定時(shí)翻頁(yè)，指定翻頁(yè)）

2020-3-15 前端達(dá)人

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>輪播圖</title> <link rel="stylesheet" href="輪播圖.css" /> <script src="輪播圖.js"> </script> </head> <body> <header> <div id="oImg">  <img id="insert" src="img/輪1.jpg" name="0"/> </div>  <p id="left" οnclick="goBack()"></p> <p id="right" οnclick="goForward()"></p> <ul id="nav">  <li id="1" οnclick="move(this)">1</li> <li id="2" οnclick="move(this)">2</li> <li id="3" οnclick="move(this)">3</li> <li id="4" οnclick="move(this)">4</li> <li id="5" οnclick="move(this)">5</li> </ul> </header> </body> </html>

* {
    margin: 0 auto;
    padding: 0 auto;
}

header {
    width: 100%;
    height: 680px;
    position: relative;

}

img {
    width: 100%;
    height: 680px; 
}   

#nav { 
    position: absolute;
    bottom: 5px;
    left: 30%;
}

#nav li {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #ccc;
    font-size: 24px;
    border-radius: 9px;
    color: darkslategrey;
    font-family: 'Times New Roman', Times, serif;
    margin: 0 25px;
    float: left;
    cursor: pointer;
    list-style: none;
}

#nav li:hover {
    background: peru;
}

#left {
    width: 25px;
    height: 24px;
    left: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx1.png);
}

#right {
    width: 25px;
    height: 24px;
    right: 0;
    top: 50%;
    cursor: pointer;
    position: absolute;
    background: url(img/fx2.png);
}

之后我們來(lái)看重中之重JS部分
JavaScript:

// 五張圖片的url
var oImg1 = "img/輪1.jpg";
var oImg2 = "img/輪2.jpg";
var oImg3 = "img/輪3.jpg";
var oImg4 = "img/輪4.jpg";
var oImg5 = "img/輪5.jpg";
// 把5張圖片存入一個(gè)數(shù)組
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

window.onload = function() {
    //剛加載時(shí)第一張圖片1號(hào)背景顏色
    document.getElementById("1").style.background = "peru";  
    run()

}

//輪播
function run() { 
    timer = setInterval(function() {
        //隨機(jī)點(diǎn)數(shù)字時(shí)能接著變化 
        var pic = document.getElementById("insert").name;
        var shade = document.getElementById("insert");  

        //如果為最后一張圖片則重新循環(huán)
        if (pic == 4) {
            pic = -1;
        }

        //點(diǎn)一個(gè)數(shù)字該數(shù)字背景顏色變化其余的不變
        var aLi = document.getElementsByTagName("li");
        for (var j = 0; j < aLi.length; j++) {
            aLi[j].style.backgroundColor = "#CCCCCC";
        } 

        var i = parseInt(pic);   

        document.getElementById("insert").src = arr[i + 1]; 

        document.getElementById("insert").name = i + 1; 

        //數(shù)字隨圖片變化
        switch (i) {
            case 0:
                var temp = '2';
                break;
            case 1:
                var temp = '3';
                break;
            case 2:
                var temp = '4';
                break;
            case 3:
                var temp = '5';
                break;
            case -1:
                var temp = '1';
                break;
        }
        document.getElementById(temp).style.background = "peru"   

    }, 5000)
}

//右箭頭 
function goForward() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert"); 
    var aLi = document.getElementsByTagName("li");
    // 數(shù)字跟著圖片一起變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '2';
            break;
        case "1":
            var n = '3';
            break;
        case "2":
            var n = '4';
            break;
        case "3":
            var n = '5';
            break;
        case "4":
            var n = '1';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向右移動(dòng)圖片
    for (var j = 0; j < arr.length; j++) {
        if (j < 4) {
            if (temp == j) {
                oBox.src = arr[j + 1]; 
            }
        } else {
            if (temp == 4) {
                oBox.src = arr[0]; 
            }
        }
    } 
    // 輪到最后一張圖片時(shí)返回第一張
    if (temp < 4) {
        oBox.name = parseInt(temp) + 1;
    } else {
        oBox.name = 0;
    }
}

//左箭頭
function goBack() {
    var temp = document.getElementById("insert").name;
    var oBox = document.getElementById("insert")
    var aLi = document.getElementsByTagName("li");
    // 圖片移動(dòng)時(shí)數(shù)字也跟著變
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    switch (temp) {
        case "0":
            var n = '5';
            break;
        case "1":
            var n = '1';
            break;
        case "2":
            var n = '2';
            break;
        case "3":
            var n = '3';
            break;
        case "4":
            var n = '4';
            break;
    }

    document.getElementById(n).style.background = "peru"
    // 向左移動(dòng)圖片 

    for (var j = 0; j < arr.length; j++) {
        if (j > 0) {
            if (temp == j) {
                oBox.src = arr[j - 1];
            }
        } else {
            if (temp == 0) {
                oBox.src = arr[4];
            }
        }
    }
    // 輪到第一張圖片時(shí)返回最后一張
    if (temp > 0) {
        oBox.name = parseInt(temp) - 1;
    } else {
        oBox.name = 4;
    }
}

//指定圖片
function move(num) { 
    var oBox = document.getElementById("insert");
    var temp = document.getElementById("insert").name;
    var aLi = document.getElementsByTagName("li");
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.backgroundColor = "#CCCCCC";
    }

    document.getElementById(num.innerHTML).style.background = "peru"

    switch (num.innerHTML) {
        case "1":
            oBox.src = arr[0];
            oBox.name = 0;
            break;
        case "2":
            oBox.src = arr[1];
            oBox.name = 1;
            break;
        case "3":
            oBox.src = arr[2];
            oBox.name = 2;
            break;
        case "4":
            oBox.src = arr[3];
            oBox.name = 3;
            break;
        case "5":
            oBox.src = arr[4];
            oBox.name = 4;
            break;
    }
}

JavaScript部分我寫(xiě)的很詳細(xì)，仔細(xì)看的話(huà)是可以看懂的，主要分3個(gè)重要部分：

用src來(lái)調(diào)用每張圖片并給每張圖片一個(gè)name，這樣方便后面的重復(fù)使用
為下方的數(shù)字按鈕匹配圖片，點(diǎn)擊1跳到第1張圖片，點(diǎn)擊2跳到第2張圖片…因?yàn)槲野阉械膱D片都存在了一個(gè)數(shù)組里，所以在匹配的時(shí)候要注意數(shù)組0位置才是數(shù)字1指定的圖片
可以來(lái)回翻頁(yè)，當(dāng)?shù)竭_(dá)最后一張圖片時(shí)，我再點(diǎn)擊下一張圖片又能返回到第一張圖片了，亦或者當(dāng)我點(diǎn)擊到第一張圖片時(shí)，再上一張圖片又回到第五張圖片了
效果如下：

大家有問(wèn)題可以在下方評(píng)論哦，看到了會(huì)及時(shí)回復(fù)噠！

原生代碼之實(shí)現(xiàn)輪播圖（左右翻頁(yè)，定時(shí)翻頁(yè)，指定翻頁(yè)）

分類(lèi)

日歷

鏈接

個(gè)人資料

存檔

原生代碼之實(shí)現(xiàn)輪播圖（左右翻頁(yè)，定時(shí)翻頁(yè)，指定翻頁(yè)）

分類(lèi)

日歷

鏈接

個(gè)人資料

存檔

原生代碼之實(shí)現(xiàn)輪播圖（左右翻頁(yè)，定時(shí)翻頁(yè)，指定翻頁(yè)）