亚洲性日韩精品一区二区三区 ,亚洲精品综合一二三区在线,久久成人国产精品二三区

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

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

首先在寫代碼之前我們需要理清如何穿插圖片呢？

可以讓所有圖片都float：left，用一個大盒子裝進(jìn)所有圖片，在用一個小盒子顯示圖片，溢出圖片就hidden，之后以每張圖片的寬度來scrollLeft.

可以給每張圖片一個name/id，用循環(huán)遍歷所有圖片

可以用float:left,但是除了我要顯示的圖片外，其他圖片都hidden，之后每當(dāng)我需要某張圖片時，我就把它制定到某位置

…

在這里，我將用第二種方法，因為它很直觀明了，我要哪張圖片我就調(diào)哪張圖片。

HTML部分：在div里面我裝了一張圖片，name:0, 這是為了在剛打開的時候，我們的頁面是有東西的而不是一片空白。其他部分都好理解，不理解的可在下方評論。

<!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>

CSS：

* {
    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);
}

之后我們來看重中之重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張圖片存入一個數(shù)組
var arr = [oImg1, oImg2, oImg3, oImg4, oImg5];

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

}

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

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

        //點一個數(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"
    // 向右移動圖片
    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]; 
            }
        }
    } 
    // 輪到最后一張圖片時返回第一張
    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");
    // 圖片移動時數(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"
    // 向左移動圖片 

    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];
            }
        }
    }
    // 輪到第一張圖片時返回最后一張
    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部分我寫的很詳細(xì)，仔細(xì)看的話是可以看懂的，主要分3個重要部分：



用src來調(diào)用每張圖片并給每張圖片一個name，這樣方便后面的重復(fù)使用

為下方的數(shù)字按鈕匹配圖片，點擊1跳到第1張圖片，點擊2跳到第2張圖片…因為我把所有的圖片都存在了一個數(shù)組里，所以在匹配的時候要注意數(shù)組0位置才是數(shù)字1指定的圖片

可以來回翻頁，當(dāng)?shù)竭_(dá)最后一張圖片時，我再點擊下一張圖片又能返回到第一張圖片了，亦或者當(dāng)我點擊到第一張圖片時，再上一張圖片又回到第五張圖片了

效果如下：




    


    

大家有問題可以在下方評論哦，看到了會及時回復(fù)噠！

————————————————
版權(quán)聲明：本文為CSDN博主「weixin_43964414」的原創(chuàng)文章，遵循 CC 4.0 BY-SA 版權(quán)協(xié)議，轉(zhuǎn)載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/weixin_43964414/article/details/104844041

« JavaWeb項目之實現(xiàn)用戶注冊、登錄與預(yù)約功能 CSS學(xué)習(xí)筆記（一）——CSS基礎(chǔ)&選擇器合集 »