輪播圖通常是關注的焦點，用於照片畫廊或許多當代網站的大中心舞台。雖然過去Adobe Flash經常是使用CSS3和JavaScript的首選工具，但是輪播圖可以輕鬆實現而無需大量程式碼。
我在這裡使用的技術是使用標準JavaScript和CSS3實現簡單輪播圖的最簡單方法之一，具有良好的交叉漸變過渡效果。
基本HTML是微不足道的。只需將幾個圖像放入div容器中：
<div class="slides"> <img src="image/cup.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/flower.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/flowers.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/strawberry.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/greatwall.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > </div>
使用CSS在容器內堆疊所有圖片並定義過渡（特定於瀏覽器的前綴可能必須用於過渡）：
/* the slide container with a fixed size */
.slides {
box-shadow: 0px 0px 6px black;
margin: 0 auto;
width: 500px;
height: 300px;
position: relative;
}
/* the images are positioned absolutely to stack. opacity transitions are animated. */
.slides img {
display: block;
position: absolute;
transition: opacity 1s;
opacity: 0;
width: 100%;
}
/* the first image is the current slide. it's faded in. */
.slides img:first-child {
z-index: 2;
/* frontmost */
opacity: 1;
}
/* the last image is the previous slide. it's behind the current slide and it's faded over. */
.slides img:last-child {
z-index: 1;
/* behind current slide */
opacity: 1;
}在這個簡單的設定之後，剩下的就是更改輪播圖的順序以推進輪播圖放映。以下程式碼片段定期將第一張影像（目前圖片）移動到容器的末尾，從而使下一張影像成為目前圖片。由於上面定義的CSS規則，更改以交叉漸變為動畫。
function nextSlide() {
var q = function(sel) {
return document.querySelector(sel);
}
q(".slides").appendChild(q(".slides img:first-child"));
}
setInterval(nextSlide, 3000)以上就是步驟的分析，以下是完整程式碼
<div class="slides"> <img src="image/cup.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/flower.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/flowers.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/strawberry.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > <img src="image/greatwall.jpg" alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" > </div>
效果如下：
以上是JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
