實現簡單的輪播圖（單張圖片、多張圖片）

雲絡阡陌發表於2020-02-11

前言

剛學js沒多久，這篇部落格就當做記錄了，以後還會完善的，希望大佬們多多指點。ps:下面出現的都是直接閃動，沒有滑動效果的輪播圖。

單張圖片的替換

原理

1.將幾張圖片疊在一起，通過改變"display:block"和"display:none"這兩個屬性實現替換。    （前提：在css中給所有圖片加上display:none屬性）
2.不用將圖片疊在一起，將一個div當做"視窗"，通過"offset（height/top/width/left）"屬性獲取圖片的
（高/到頂部距離/寬/到左邊距離/到右邊距離），再通過事件更改相應的屬性，讓圖片在"視窗"內整體移動。

樣例一

// 
window.onload = function () {//頁面載入時啟用函式
    Carouselfigure();//函式名可任意
};
function Carouselfigure() {
    var next = document.getElementsByClassName("right")[0];//點選切換下一張的按鈕
    var prev = document.getElementsByClassName("left")[0];//點選切換上一張的按鈕
    var img = document
        .getElementsByClassName("innerbox")[0]
        .getElementsByTagName("img");//獲取圖片陣列
    var index = 0;//定義一個函式做工具人，“index”可改為任意名稱
    img[0].style.display = "block";//使頁面載入後第一張圖片顯示
    next.onclick = function () {//繫結切換下一張圖片的點選事件
        img[index].style.display = "none";//隱藏當前圖片
        if ((index == 3)) {//if語句使其迴圈
            index = 0;
        } else {
            index++;//通過index的切換實現圖片的切換
        }
        img[index].style.display = "block";//顯示圖片
    };
    prev.onclick = function () {//繫結切換上一張圖片的點選事件
        img[index].style.display = "none";//隱藏當前圖片
        if ((index == 0)) {//if語句使其迴圈
            index = 3;
        } else {
            index--;//通過index的切換實現圖片的切換
        }
        img[index].style.display = "block";//顯示圖片
    };
}

樣例二

//html
<body>
        <div class="button">
            <div class="left"></div>
            <div class="right"></div>
        </div>
        <div class="allbox">
            <div class="outbox">
                <div class="innerbox">//用來移動的div
                    <img src="1.jpg">
                    <img src="2.jpg">
                    <img src="3.jpg">
                    <img src="4.jpg">
                </div>
            </div>
        </div>
    </body>

//css
*{
    margin: 0;
    padding: 0;
}
.allbox{
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 50px;
    height: 300px;
}
.outbox {
    position: relative;
    height: 300px;
    width: 25%;
    overflow: hidden;//使溢位div的圖片隱藏
}
.innerbox {
    position: absolute;
    display: flex;//讓圖片橫向排列
    width:100%; 
}
.innerbox img {
    width: 100%;
    height: 300px;
}
.button{
    position: relative;
    display: flex;
    justify-content: center;
}
.left{
    width: 50px;
    height: 50px;
    background-color:red ;
    cursor: pointer;
}
.right{
    width: 50px;
    height: 50px;
    background-color: black;
    cursor: pointer;
}

//js
window.onload = function () {
    Carouselfigure();
};
function Carouselfigure() {
    var next = document.getElementsByClassName("right")[0];
    var prev = document.getElementsByClassName("left")[0];
    var innerbox = document.getElementsByClassName("innerbox")[0];
    var img = document
        .getElementsByClassName("innerbox")[0]
        .getElementsByTagName("img");
    var index = 0;
    function move() {//設定該函式為移動函式
        innerbox.style.left = -img[0].offsetWidth * index + 'px';
        //offsetWidth用來獲取圖片的寬度，由於這幾張圖片的寬度相同，取任意一張的寬度都可，故選用陣列中的0.負號是因為改變的是left的值，為了按圖片順序從左到右，才使用負號（可自行更換）。
    }
    next.onclick = function () {
        if (index == 3) {
            index = 0;
        }
        else { index++; }
        move();//執行移動函式來實現效果
    }
    prev.onclick = function () {
        if (index == 0) {
            index = 3;
        }
        else { index--; }
        move();//執行移動函式來實現效果
    }
}

多張圖片的替換（一次動一張）

多張圖片的替換其實和單張圖片的原理二是一樣的，只不過要稍稍做一點變化。↓

原理

相關文章