在制作網站過程中,幻燈片是很常見的元素。為了提高用戶體驗,很多網站的幻燈片都會加上序號,讓用戶知道當前是第幾張圖。下面我們來看一下如何使用 JavaScript 和 CSS 實現幻燈片序號。
首先,我們需要使用 HTML 來創建幻燈片。這里我們假設已經創建好了,每個幻燈片都有一個獨立的 div 元素,并且這些元素的類名都是 slide。接下來,我們可以使用 JavaScript 來給這些幻燈片加上序號:
// 獲取所有幻燈片元素
var slides = document.querySelectorAll('.slide');
// 遍歷每個幻燈片元素,給它添加序號
for(var i=0; i<slides.length; i++){
var slideNumber = document.createElement('div'); // 創建序號元素
slideNumber.innerText = i+1; // 在元素中寫入序號
slideNumber.classList.add('slide-number'); // 給元素添加類名
slides[i].appendChild(slideNumber); // 將序號元素添加到幻燈片中
}
運行以上代碼后,每個幻燈片元素中都會加上一個序號元素,類名為 slide-number。接下來,我們可以使用 CSS 來設置這些序號的樣式。
.slide-number{
position: absolute; /* 設置序號元素的位置為絕對定位 */
top: 0;
right: 0;
background-color: #333; /* 設置背景色為黑色 */
color: #fff; /* 設置文字顏色為白色 */
padding: 5px; /* 設置內邊距 */
font-size: 16px; /* 設置文字大小 */
}
以上代碼中,我們使用了 position 屬性將序號元素定位到幻燈片的右上角,并設置了背景色、文字顏色、內邊距和字體大小等樣式。
現在,我們已經成功地使用 JavaScript 和 CSS 實現了幻燈片序號。用戶可以通過這些序號更加方便地瀏覽網站的幻燈片內容。
上一篇js css 收縮動畫
下一篇js css 計算器