HTML 輪播圖左右切換代碼示例
使用輪播圖可以讓網(wǎng)頁(yè)內(nèi)容更加豐富、生動(dòng)，對(duì)于展示圖片或者廣告位十分適用。下面是一個(gè)基于 HTML 和 CSS 的左右切換輪播圖的代碼示例。
首先，我們需要用 HTML 創(chuàng)建一個(gè)容器來(lái)包含輪播圖，該容器設(shè)置寬度和高度以及相對(duì)定位：
接下來(lái)，我們可以使用 CSS 來(lái)設(shè)置輪播圖的樣式。為了實(shí)現(xiàn)圖片左右切換的效果，我們需要設(shè)置輪播圖容器的寬度足夠?qū)挘匀菁{多張圖片，并將圖片都放在同一個(gè) div 容器內(nèi)，并設(shè)置容器寬度為輪播圖容器的寬度。然后，我們可以將圖片容器的寬度設(shè)置為圖片數(shù)量的倍數(shù)。下面是相應(yīng)的代碼：
/* 輪播圖容器 */
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
/* 圖片容器 */
.slider .slides {
display: flex;
width: 400%;
}
/* 圖片 */
.slider .slides img {
width: calc(100% / 4);
height: 400px;
object-fit: cover;
}其中，calc() 是 CSS 函數(shù)，用于執(zhí)行基本數(shù)學(xué)運(yùn)算，這里我們用 calc(100% / 4) 來(lái)設(shè)置每張圖片的寬度。
接下來(lái)，我們需要使用 JavaScript 來(lái)實(shí)現(xiàn)圖片的滑動(dòng)切換效果。我們可以通過使用一個(gè)計(jì)數(shù)器變量來(lái)記錄當(dāng)前展示的圖片，然后依次滑動(dòng)圖片容器。下面是相應(yīng)的 JavaScript 代碼：let sliderIndex = 0; // 記錄當(dāng)前的圖片
function nextSlide() {
sliderIndex++;
if (sliderIndex >3) {
sliderIndex = 0;
}
document.querySelector('.slider .slides').style.transform = `translateX(-${sliderIndex * 100}%)`;
}
function prevSlide() {
sliderIndex--;
if (sliderIndex< 0) {
sliderIndex = 3;
}
document.querySelector('.slider .slides').style.transform = `translateX(-${sliderIndex * 100}%)`;
}在上述代碼中，我們使用了 translateX 屬性，該屬性用于通過指定元素在水平方向上的移動(dòng)來(lái)實(shí)現(xiàn)滑動(dòng)效果。其中 `${sliderIndex * 100}%` 表示當(dāng)前圖片的偏移量。
最后，我們需要為左右切換按鈕添加事件監(jiān)聽，以便觸發(fā)圖片的滑動(dòng)效果。下面是相應(yīng)的 HTML 代碼：在上述代碼中，我們將按鈕添加到輪播圖容器中，并為它們添加了 onclick 事件監(jiān)聽，以便觸發(fā)相應(yīng)的 JavaScript 函數(shù)。 綜上所述，通過將 HTML、CSS 和 JavaScript 組合在一起，我們可以輕松地實(shí)現(xiàn)一個(gè)基于 HTML 和 CSS 的左右切換輪播圖。
