HTML DIV 滑動輪播代碼
在網頁設計中，滑動輪播是常用的效果，它可以引起用戶的目光，提高用戶體驗。HTML DIV 滑動輪播是一種實現滑動輪播效果的方式。下面我們來看一下HTML DIV 滑動輪播的代碼。
首先，我們需要HTML和CSS代碼，用于設計輪播的外觀和樣式。
```html
```
```css
#slider {
width: 100%;
height: 400px;
overflow: hidden;
position: relative;
}
#slider-container {
width: calc(100% * 3);
display: flex;
position: absolute;
left: 0;
transition: 0.5s;
}
.slide {
width: calc(100% / 3);
height: 400px;
text-align: center;
}
.slide img {
max-width: 100%;
max-height: 100%;
margin: auto;
display: block;
}
#slider-prev {
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
}
#slider-next {
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
}
```
上述代碼實現了一個三張圖片輪播的效果，并用按鈕實現了前一張和后一張的切換。其中，`#slider` 中設置了輪播的尺寸大小和隱藏溢出，`#slider-container` 設置了輪播容器的寬度和使用 Flexbox 布局， `#slider-prev` 和 `#slider-next` 設置了按鈕的位置和居中。`slide` 類定義了每一個圖像所占的寬度和高度。
接下來，我們需要 JavaScript 代碼來完成輪播的切換效果。代碼如下：
```javascript
var currentSlide = 1;
var totalSlides = document.querySelectorAll('.slide').length;
var sliderContainer = document.getElementById('slider-container');
var slideSize = document.querySelector('.slide').clientWidth;
document.getElementById('slider-prev').addEventListener('click', function(){
if(currentSlide === 1) {
currentSlide = totalSlides;
} else {
currentSlide--;
}
sliderContainer.style.transform = "translateX(" + (-slideSize * (currentSlide - 1)) + "px)";
});
document.getElementById('slider-next').addEventListener('click', function(){
if(currentSlide === totalSlides) {
currentSlide = 1;
} else {
currentSlide++;
}
sliderContainer.style.transform = "translateX(" + (-slideSize * (currentSlide - 1)) + "px)";
});
```
代碼中，首先定義了當前圖片和總的圖片數量。`sliderContainer` 變量獲取了輪播容器元素， `slideSize` 獲取了每張圖片的寬度。
然后，為“Prev”和“Next”按鈕添加事件監聽器，當點擊事件發生后，我們根據當前正在顯示的圖片的下標 `currentSlide` 來判斷切換到哪一張圖片。然后，使用 CSS transform 屬性使容器元素向左或向右移動以轉到正確的圖片。
這是一種由HTML、CSS和JavaScript實現滑動輪播效果的方式，您可以使用該方法創建自己的滑動輪播應用程序，希望這篇文章會讓您受益！