中秋節了，你收到月餅了嗎🥮，哈哈哈哈，首先祝大家中秋節快樂，biubiubiu～中秋節沒能回家，製作了一個中秋節相關的輪播圖網頁。
一、準備中秋素材主要使用的素材是圖片，借用了b站花好月圓會宣傳網頁的一些圖片還有百度圖片。說句題外話，個人感覺b站很多宣傳的網頁十分的好看，風格各異，古風、動漫啥都有，但它並沒有用很多的前端特效，大部分都是圖片，所以說我十分佩服b站的美工設計師們。👍
二、網頁布局網頁布局包含三部分：固定的背景、中秋習俗相關的輪播圖和中秋祝福。
（一）固定的背景1、設置背景為body設置背景圖片，將background-attachment設置為fixed，使在頁面滾動時背景固定。
//cssbody { margin: 0; padding: 0;
width: 100vw; height: 100vh; background-image: url(./imgs/bg.png); background-size: 100%; background-attachment: fixed; background-repeat: no-repeat;
display: flex; justify-content: center; align-items: center;}
2、設置掩膜個人感覺加個掩膜比較好看，相當於在背景圖上覆蓋了一層紗，實現方式就是通過添加一個掩膜div，將它的背景顏色透明度設置低一點。
//css.mask { position: absolute; width: 100vw; height: 100vh; background-color: rgba(100, 100, 100, 0.3);}
（二）中秋習俗相關的輪播圖1、頁面布局這一部分我使用彈性布局，將輪播圖放在了頁面中心的位置。利用絕對定位的特性，將上一張、下一張和中秋習俗標題放在了輪播圖中的指定位置。中秋習俗標題和中秋祝福使用的字體都是華文行楷STXingkai
//html <div id="cus-item"> <div id="imgs"> <img class="img-item" src="imgs/1.png" alt="" /> <img class="img-item" src="imgs/2.png" alt="" /> <img class="img-item" src="imgs/3.png" alt="" /> <img class="img-item" src="imgs/4.png" alt="" /> <img class="img-item" src="imgs/5.png" alt="" /> </div> <div class="arrow"> <div id="pre"></div> <div id="next"></div> </div> <div id="title"></div> </div>
//css position: relative; width: 490px; height: 295px; margin-top: 65px;} width: 490px; height: 295px;} position: absolute; width: 490px; height: 295px; display: none; border: rgba(248, 222, 26, 0.8) solid 2px;} display: block;} position: absolute; width: 15px; height: 62px; top: 50%; margin-top: -31px; background-size: 100%; cursor: pointer;} position: absolute; width: 15px; height: 62px; background-image: url(imgs/pre.png); background-size: 100%; left: 5px;} position: absolute; width: 15px; height: 62px; background-image: url(imgs/next.png); background-size: 100%; left: 470px;} position: absolute; width: 36px; top: 20%; right: 80px; font-family: "STXingkai"; font-size: 30px; color: rgba(248, 222, 26, 0.8);}
2、輪播圖封裝考慮到輪播圖的復用性，我對輪播圖進行了封裝。
（1）實例化參數
創建輪播圖實例需要傳入的參數有：輪播圖最外圍的div標籤wrap、輪播圖圖片標籤數組imgs、上一張和下一張標籤數組paging、中秋習俗標題標籤title以及輪播圖對應的習俗標題數組titles
function Banner(wrap, imgs, paging, title, titles) { this.wrap = wrap; this.imgs = imgs; this.paging = paging; this.title = title; this.titles = titles; this.timer = 0; this.index = 0; this.init();}
（2）封裝成員函數
初始化函數init：該函數用於實例對象的初始化，在構造函數中調用。
禁止拖拽函數notDrag：該函數用阻止默認事件，禁止輪播圖被拖拽。
自動輪播函數auto：當滑鼠不在輪播圖內時，圖片自動輪播。
圖片切換函數pagingClick：點擊上一張或下一張，對圖片進行切換。
init: function () { this.title.innerHTML = this.titles[this.index]; this.imgs[this.index].style.display = "block"; this.notDrag(); this.auto(); this.wrapHover(); this.pagingClick(); }, notDrag: function () { for (let i = 0; i < this.imgs.length; i++) { this.imgs[i].ondrag = this.imgs[i].onmousedown = function (e) { e = e || event; e.preventDefault ? e.preventDefault() : (window.event.returnValue = false); }; } }, auto: function () { let that = this; this.timer = setInterval(function () { that.checkOut(function () { that.index++; that.index = that.index % that.imgs.length; }); }, 1000); }, checkOut: function (callback) { this.imgs[this.index].style.display = "none"; callback && callback(); this.title.innerHTML = this.titles[this.index]; console.log(this.title); this.imgs[this.index].style.display = "block"; }, pagingClick: function () { let that = this; for (let i = 0; i < this.paging.length; i++) { if (i) { this.paging[i].onclick = function () { that.checkOut(function () { that.index++; that.index = that.index % that.imgs.length; }); }; } else { this.paging[i].onclick = function () { that.checkOut(function () { that.index--; if (that.index < 0) that.index = that.imgs.length - 1; }); }; } } }, wrapHover: function () { let that = this; this.wrap.onmouseenter = function () { clearInterval(that.timer); }; this.wrap.onmouseleave = function () { that.auto(); }; },
（3）實例化輪播圖對象
let wrap = document.getElementById("cus-item");let imgs = document.getElementById("imgs").getElementsByTagName("img");let pre = document.getElementById("pre");let next = document.getElementById("next");let paging = [pre, next];let titles = ["賞月", "燃燈", "猜燈謎", "燒塔", "吃月餅"];let title = document.getElementById("title");let banner = new Banner(wrap, imgs, paging, title, titles);
（三）中秋祝福 但願人長久，千裡共嬋娟
我通過設置writing-mode屬性，將div裡面的的文字豎排，其實也可以使用Ps將中秋祝福設置成一張圖片，這樣還能比較方便地在祝福裡添加其他中秋元素，不如月亮、月餅、玉兔等，使用css+html也可以設計，我懶的找素材了，大家有興趣可以繼續豐富。
<div class="bless" id="right">但願人長久</div> <div class="bless" id="left">千裡共嬋娟</div>
.bless { position: absolute; width: 50px; height: 300px; right: 120px; font-family: "STXingkai"; font-size: 54px; color: rgba(248, 222, 26, 0.8); writing-mode: tb-rl;}#right { top: 100px;}#left { bottom: 100px; transform: translateX(-80px);}
三、結束語中秋快樂🥮
麻煩點個讚吧👍，嘻嘻嘻
關注我，共同進步