電商項目實戰第四節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【輪播圖特效】

原創 数据库爆破专家 2020-04-20 13:29

上一節：電商項目實戰第三節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【分類導航欄】

文章目錄

【考拉海購網站】之【輪播圖特效】

輪播圖特效如圖所示 >>>
在這裏插入圖片描述

第一步，根據頁面佈局寫相應的html標籤

這是考拉海購網的輪播圖佈局情況 >>>
（1）左右兩邊分別有左切圖和右切圖按鈕
（2）中間時一張寬度非常寬的海報圖
（3）底部居中是一個顯示輪播圖當前序列的條
在這裏插入圖片描述

index.html文件代碼

相關解釋已經寫在代碼註釋中:

  <!-- 輪播圖 -->
         <!-- 輪播圖 -->
        <div class="RotationChart">
            <!-- 背景圖片實際是一個超鏈接的廣告，所以img外面包裹一層a標籤 -->
            <a href="">
                <img src="./cd171bbe-1828-4ff0-90a8-9bc45b9908b9T19010292039_1920_400.webp" alt="">
                <img src="./432688c0-d4fc-436f-bb3e-f8452e29db2bT1912311645_1920_400.webp" alt="">
                <img src="./640bc826-5ddf-43ea-9501-9d716240f6d6T19010292032_1920_400.webp" alt="">
                <img src="./7a009d6e-ea47-415d-859a-607fc4a93db0T19010292034_1920_400.webp" alt="">
                <img src="./b5ab8054-fd6c-437b-a646-0b7e193e4a71T19010292052_1920_400.webp" alt="">
            </a>
            <!-- 左右兩邊的按鈕 -->
            <span>
                ></span> <span>
                < </span> <!-- 底部的序列條，用於顯示輪播圖當前處於整個圖片序列的哪個位置 -->
                    <!-- 總共5個序列點，我們就用ul>li做個橫向的列表，然後設置爲圓角的形狀就行 -->
                    <div class="bottomList">
                        <ul>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                            <li></li>
                        </ul>
                    </div>
        </div>

圖片載入後的模樣 >>>
在這裏插入圖片描述
爲了讓圖形集中在一個區域，方便輪播圖特效，只需要給img脫離文檔流就可以讓他們固定到一個位置上，設置屬性

img{
	position:absolute；
}

即可
在這裏插入圖片描述

第二步，美化輪播圖小組件樣式

主要調整輪播圖前進後退這兩個鍵，還有底部序列條的樣式，相關細節我已經在index.css文件代碼中寫好了註釋
在這裏插入圖片描述

index.css文件代碼

/* -------------輪播圖------------ */
/* 輪播圖父級 */
.RotationChart{ 
    position: relative;
    width: 1964px;
    height: 400px;
    margin-left: -400px;
    border: 1px solid salmon;
}

/* 對輪播圖圖片樣式進行設計，並定位在一起，方便後期輪播圖顯示消失的特效設置 */
.RotationChart img{
    position: absolute;
    opacity: 0;
    /* 動畫過渡效果 */
    transition: all 0.4s ease;
} 

/* 設置左右兩邊的輪播圖播放前進後退按鈕 */
.RotationChart span{
    /* 因爲父級RotationChart已經進行相對定位，這裏採用絕對定位，方便讓輪播圖的子組件脫離文檔流，進行調整組件位置的操作 */
    position: absolute;
    display: block;
    top: 150px;
    left: 210px;
    width: 30px;
    height: 70px;
    color: rgb(243, 240, 240);
    font-size: 36px;
    line-height: 70px;
    text-align: center;
    background-color: rgba(51, 51, 51,0.84);
    /* 讓按鈕堆疊順序等級提升到666級，這樣輪播圖及其他組件就不會擋住用戶按按鈕的操作 */
    z-index: 666;
    cursor: pointer;
}

.RotationChart span:nth-child(2){
    top: 150px;
    left: 1645px;
}

/* 底部序列條 */
.bottomList{
    position: absolute;
    width: 138px;
    height: 28px;
    top: 340px;
    left: 850px;
    border-radius: 25px;
    background-color: rgba(112, 128, 144,0.6);
    border: 1px solid salmon;
}


.bottomList ul{
    margin-left: -40px;
    margin-top: 6px;
}

/* 對序列條的5個小圓點進行設置，塊級元素變圓的祕訣就是通過對border-radius進行設置 */
.bottomList li{
    display: inline-block;
    margin-right: 10px;
    width: 9px;
    height: 9px;
    border-radius: 25px;
    background-color: rgb(255, 255, 255);
    cursor: pointer;
}


.bottomList li:first-child{
    margin-left: 22px;
}

第三步，輪播圖原理

自動切圖輪播圖原理（初階版）

對圖片進行絕對定位後，讓它們全部都集中在一個區域，然後全部隱藏（透明度設置爲0既可），設定一個計時器定時控制5張圖片依次顯示和消失，顯示和消失的過渡效果採用css的過渡動畫屬性來設置
在這裏插入圖片描述
然後給定一個過渡動畫，0.4秒的過渡

 transition: all 0.4s ease;

在這裏插入圖片描述

//輪播圖    
var times = 0;
// 獲取輪播圖圖片對象
const rotationImg = document.getElementsByClassName('RotationChart')[0].getElementsByTagName('img');
// 獲取序列條小圓點對象
const bottomListLi = document.getElementsByClassName('bottomList')[0].getElementsByTagName('li');

// 初始值，第一次運行的時候第一張圖片顯示及底部序列條小圓點標記顏色顯示
rotationImg[times].style.opacity = 1;
bottomListLi[times].style.backgroundColor = '#d22147';

function rotation() {
    // 設定計時器
    var roatationChart = setInterval(function () {
        // 當次數大於4次時，數組爲4的圖片（也就是第5張圖片）透明度變爲0，數組爲0的圖片透明度變爲1
        if (times >= 4) {
            rotationImg[4].style.opacity = 0;
            rotationImg[0].style.opacity = 1;
            times = 0;
        }
        // 當次數小於4次時，以當前次數爲下標的數組的圖片透明度變爲0，下一次爲下標的數組的圖片透明度變爲1
        else if (times < 4) {
            rotationImg[times].style.opacity = 0;
            rotationImg[++times].style.opacity = 1;
        }
        for (let i = 0; i < bottomListLi.length; i++) {
            bottomListLi[i].style.backgroundColor = 'rgb(255, 255, 255)';
        }
        bottomListLi[times].style.backgroundColor = '#d22147';
    }, 4000)
}

rotation(); //定義函數後並不能啓用，所以這裏還要寫這個函數名字來進行調用，才能運行

初階版輪播圖運行效果一覽

在這裏插入圖片描述
當然，這只是開始，我們來看下接下來對於按鈕操控輪播圖的設置

按鈕操控輪播圖的原理 （進階版）

爲了讓輪播圖無空白bug，且循環運作，我們應該這樣設置允許規則 >>>
（1）點擊左側按鈕會切出上一張圖片，如果當前圖片爲第一張，則會切出最末尾的圖片（也就是第5張）
（2）點擊右側按鈕會切出下一張圖片，如果當前圖片爲最後一張，則會切出最前頭的圖片（也就是第1張）
（3）點擊底部序列條小圓圈，點擊第幾個就會切出第幾張圖片，且小圓圈的顏色也在相應位置進行標記

// 按鈕操控輪播圖
// 獲取按鈕對象
const RotationButtom = document.getElementsByClassName('RotationChart')[0].getElementsByTagName('span');

//底部序列條顏色改變函數，用於讓所有序列小圓圈變白色，然後只指定當前次數所在的序列爲暗紅色
function bottomListLi_Change() {
    for (let i = 0; i < bottomListLi.length; i++) {
        bottomListLi[i].style.backgroundColor = 'rgb(255, 255, 255)';
    }
    bottomListLi[times].style.backgroundColor = '#d22147';
}

// RotationButtom[0]表示切換下一張圖片
RotationButtom[0].onclick = function () {
    clearInterval(rotationImg);
    rotationImg[times].style.opacity = 0;
    times++;
    // 判斷條件，當times遞增後的值大於4次時，times歸零，讓圖片從第一張圖片開始切
    if (times > 4) {
        times = 0;
    }
    rotationImg[times].style.opacity = 1;
    bottomListLi_Change();
}
// RotationButtom[1]表示切換上一張圖片
RotationButtom[1].onclick = function () {
    clearInterval(rotationImg);
    rotationImg[times].style.opacity = 0;
    times--;
    // 判斷條件，當times遞減後的值小於0次時，times跳到第5次切圖,意思就是從第一張跳到最後一張
    if (times < 0) {
        times = 4;
    }
    rotationImg[times].style.opacity = 1;
    bottomListLi_Change();
}

//點擊相應的序列條小圓圈後切換到相應的圖片
for (let i = 0; i < bottomListLi.length; i++) {
    bottomListLi[i].onclick = function () {
        console.log(i);
        for (let i = 0; i < bottomListLi.length; i++) {
            if (bottomListLi[i] === this) {
                times = i;
                bottomListLi_Change();
                for (let z = 0; z < rotationImg.length; z++) {
                    rotationImg[z].style.opacity = 0;
                }
                rotationImg[times].style.opacity = 1;
                // 這個地方和通過按鈕操控切圖的原理是一樣的，這樣做的目的是爲了循環切圖，而不會跳出循環，產生bug
                if (times >= 4) {
                    times = 0;
                } else {
                    times++;
                }
            }
        }
    }
}

進階版輪播圖運行效果一覽

在這裏插入圖片描述

第四步，完成

index.js文件代碼

//------------輪播圖-------------
var times = 0;
// 獲取輪播圖圖片對象
const rotationImg = document.getElementsByClassName('RotationChart')[0].getElementsByTagName('img');
// 獲取序列條小圓點對象
const bottomListLi = document.getElementsByClassName('bottomList')[0].getElementsByTagName('li');

// 初始值，第一次運行的時候第一張圖片顯示及底部序列條小圓點標記顏色顯示
rotationImg[times].style.opacity = 1;
bottomListLi[times].style.backgroundColor = '#d22147';

function rotation() {
    // 設定計時器
    var roatationChart = setInterval(function () {
        // 當次數大於4次時，數組爲4的圖片（也就是第5張圖片）透明度變爲0，數組爲0的圖片透明度變爲1
        if (times >= 4) {
            rotationImg[4].style.opacity = 0;
            rotationImg[0].style.opacity = 1;
            times = 0;
        }
        // 當次數小於4次時，以當前次數爲下標的數組的圖片透明度變爲0，下一次爲下標的數組的圖片透明度變爲1
        else if (times < 4) {
            rotationImg[times].style.opacity = 0;
            rotationImg[++times].style.opacity = 1;
        }
        for (let i = 0; i < bottomListLi.length; i++) {
            bottomListLi[i].style.backgroundColor = 'rgb(255, 255, 255)';
        }
        bottomListLi[times].style.backgroundColor = '#d22147';
    }, 4000)
}

rotation(); //定義函數後並不能啓用，所以這裏還要寫這個函數名字來進行調用，才能運行


// 按鈕操控輪播圖
// 獲取按鈕對象
const RotationButtom = document.getElementsByClassName('RotationChart')[0].getElementsByTagName('span');

//底部序列條顏色改變函數，用於讓所有序列小圓圈變白色，然後只指定當前次數所在的序列爲暗紅色
function bottomListLi_Change() {
    for (let i = 0; i < bottomListLi.length; i++) {
        bottomListLi[i].style.backgroundColor = 'rgb(255, 255, 255)';
    }
    bottomListLi[times].style.backgroundColor = '#d22147';
}

// RotationButtom[0]表示切換下一張圖片
RotationButtom[0].onclick = function () {
    clearInterval(rotationImg);
    rotationImg[times].style.opacity = 0;
    times++;
    // 判斷條件，當times遞增後的值大於4次時，times歸零，讓圖片從第一張圖片開始切
    if (times > 4) {
        times = 0;
    }
    rotationImg[times].style.opacity = 1;
    bottomListLi_Change();
}
// RotationButtom[1]表示切換上一張圖片
RotationButtom[1].onclick = function () {
    clearInterval(rotationImg);
    rotationImg[times].style.opacity = 0;
    times--;
    // 判斷條件，當times遞減後的值小於0次時，times跳到第5次切圖,意思就是從第一張跳到最後一張
    if (times < 0) {
        times = 4;
    }
    rotationImg[times].style.opacity = 1;
    bottomListLi_Change();
}

//點擊相應的序列條小圓圈後切換到相應的圖片
for (let i = 0; i < bottomListLi.length; i++) {
    bottomListLi[i].onclick = function () {
        console.log(i);
        for (let i = 0; i < bottomListLi.length; i++) {
            if (bottomListLi[i] === this) {
                times = i;
                bottomListLi_Change();
                for (let z = 0; z < rotationImg.length; z++) {
                    rotationImg[z].style.opacity = 0;
                }
                rotationImg[times].style.opacity = 1;
                // 這個地方和通過按鈕操控切圖的原理是一樣的，這樣做的目的是爲了循環切圖，而不會跳出循環，產生bug
                if (times >= 4) {
                    times = 0;
                } else {
                    times++;
                }
            }
        }
    }
}

最終效果如圖所示 >>>
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

用JQ+AJAX+PHP+Mysql做簡單的用戶註冊功能

文章目錄當前數據庫是空的初始化數據庫及自動建表的方法，在apache服務器環境下運行initDataBases.php文件動態結果演示插入後的

数据库爆破专家 2020-06-30 12:57:31

Web前端知識點複習（四十一個知識點·選擇題大集合）

文章目錄（一）web前端開發概述（二）網站與網頁（三）Web前端開發技術（四） HTML概述（五）HTML文件結構（六）HTML標籤(I)（七）HTML標籤(II)（八） HTML標籤(III)（九）HTML標籤(IV)（十）HT

数据库爆破专家 2020-06-30 12:57:27

前端電商項目實戰，如何從 0 開始創造一個【考拉海購官網】？（ 共6節教程 ）

文章目錄聲明一，關於頁面還原度效果比較二，第一組演示圖是 考拉海購官網的三，第二組演示圖是 本次教程從0開發的四，教程目錄（共6節）五，全部代碼下載地址新手提示（1）如何從github下載代碼文件（2）如何查看效果（3）關於後

数据库爆破专家 2020-06-30 12:57:27

用JS的‘ if...else ’做【網站登錄的用戶表單驗證】

数据库爆破专家 2020-04-27 14:28:54

電商項目實戰第六節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【頁底信息，網站備案信息】

数据库爆破专家 2020-04-23 14:00:05

前端電商項目實戰，如何從 0 創造一個【考拉海購官網】？（ 共6節教程 ）

数据库爆破专家 2020-04-23 14:00:05

電商項目實戰第五節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【商品欄及右側垂直導航】

数据库爆破专家 2020-04-22 13:44:58

電商項目實戰第三節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【分類導航欄】

数据库爆破专家 2020-04-20 13:29:45

電商項目實戰第二節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【搜索框那一欄】

数据库爆破专家 2020-04-19 13:15:17

電商項目實戰第一節: CSS3+HTML5+JS 設計案例【考拉海購網站】之【頂部導航】

数据库爆破专家 2020-04-18 13:00:58

h5遊戲開發：用html+css+js寫一個整蠱遊戲

数据库爆破专家 2020-04-17 13:10:38

用CSS設計三角形圖標

数据库爆破专家 2020-04-16 02:31:19

md5加密小工具製作（js版）

数据库爆破专家 2020-04-16 02:31:19

用JQ+AJAX+PHP+Mysql做簡單的用戶註冊功能

文章目錄當前數據庫是空的初始化數據庫及自動建表的方法，在apache服務器環境下運行initDataBases.php文件動態結果演示插入後的

数据库爆破专家 2020-06-30 12:57:31

Web前端知識點複習（四十一個知識點·選擇題大集合）

文章目錄（一）web前端開發概述（二）網站與網頁（三）Web前端開發技術（四） HTML概述（五）HTML文件結構（六）HTML標籤(I)（七）HTML標籤(II)（八） HTML標籤(III)（九）HTML標籤(IV)（十）HT

数据库爆破专家 2020-06-30 12:57:27