下面是幾個常見的div輪播代碼案例，分別展示了倒計時輪播、自動輪播和手動輪播效果：
1. 倒計時輪播：
<div id="slideshow" style="width: 500px; height: 300px; overflow: hidden;"> <div class="slide">第一張圖片</div> <div class="slide">第二張圖片</div> <div class="slide">第三張圖片</div> <div class="slide">第四張圖片</div> </div>
<script> var slides = document.getElementsByClassName("slide"); var currentIndex = 0;
function showSlide(index) { for (var i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } slides[index].style.display = "block"; }
function startSlideshow() { setInterval(function() { currentIndex++; if (currentIndex >= slides.length) { currentIndex = 0; } showSlide(currentIndex); }, 2000); }
startSlideshow(); </script>
上述代碼定義了一個<div>元素作為輪播容器，通過設置寬度、高度和溢出隱藏實現區域限制。其中，每個輪播項使用<div>元素并添加slide類名進行樣式設置。JavaScript代碼通過獲取slide類名的元素集合，以及定義當前索引和顯示輪播項的函數實現倒計時輪播效果。通過調用startSlideshow()函數設置定時器，每隔2秒自動切換下一張圖片，并通過showSlide()函數進行顯示切換。
2. 自動輪播：
<div id="slideshow" style="width: 500px; height: 300px; overflow: hidden;">
<div class="slide">第一張圖片</div>
<div class="slide">第二張圖片</div>
<div class="slide">第三張圖片</div>
<div class="slide">第四張圖片</div>
</div>
<script>
var slides = document.getElementsByClassName("slide");
var currentIndex = 0;
function showSlide(index) {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[index].style.display = "block";
}
function startSlideshow() {
currentIndex++;
if (currentIndex >= slides.length) {
currentIndex = 0;
}
showSlide(currentIndex);
setTimeout(startSlideshow, 2000);
}
startSlideshow();
</script>
上述代碼與倒計時輪播類似，只是將定時器替換為了setTimeout()函數，以實現自動輪播的效果。函數startSlideshow()內部切換圖片，然后通過setTimeout()函數延時2秒再次調用startSlideshow()函數，實現無限循環的自動輪播效果。
3. 手動輪播：
<div id="slideshow" style="width: 500px; height: 300px; overflow: hidden;">
<div class="slide">第一張圖片</div>
<div class="slide">第二張圖片</div>
<div class="slide">第三張圖片</div>
<div class="slide">第四張圖片</div>
</div>
<script>
var slides = document.getElementsByClassName("slide");
var currentIndex = 0;
function showSlide(index) {
for (var i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[index].style.display = "block";
}
document.getElementById("slideshow").addEventListener("click", function() {
currentIndex++;
if (currentIndex >= slides.length) {
currentIndex = 0;
}
showSlide(currentIndex);
});
</script>
上述代碼將點擊事件綁定在輪播容器上，當用戶點擊容器時觸發切換操作。點擊事件內部切換圖片，然后判斷當前索引是否超出范圍，并通過showSlide()函數進行顯示切換。
通過以上幾個示例代碼可見，通過div輪播的實現，我們可以根據需要選擇不同的輪播效果，如倒計時輪播、自動輪播和手動輪播等。通過合理的CSS布局、JavaScript或者jQuery等腳本技術，我們可以靈活地實現各種不同樣式的輪播效果，提升網頁的交互和展示效果。