JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）

輪播圖通常是關注的焦點，用於照片畫廊或許多當代網站的大中心舞台。雖然過去Adobe Flash經常是使用CSS3和JavaScript的首選工具，但是輪播圖可以輕鬆實現而無需大量程式碼。

我在這裡使用的技術是使用標準JavaScript和CSS3實現簡單輪播圖的最簡單方法之一，具有良好的交叉漸變過渡效果。

基本HTML是微不足道的。只需將幾個圖像放入div容器中：

<div class="slides">
  <img  src="/static/imghw/default1.png"  data-src="image/cup.jpg"  class="lazy"    alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/flower.jpg"  class="lazy"   alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/flowers.jpg"  class="lazy"   alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/strawberry.jpg"  class="lazy"   alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/greatwall.jpg"  class="lazy"   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="/static/imghw/default1.png"  data-src="image/cup.jpg"  class="lazy"    alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/flower.jpg"  class="lazy"   alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/flowers.jpg"  class="lazy"   alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/strawberry.jpg"  class="lazy"   alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
  <img  src="/static/imghw/default1.png"  data-src="image/greatwall.jpg"  class="lazy"   alt="JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）" >
</div>

效果如下：

以上是JavaScript和CSS實現的簡單的輪播圖播放效果（附原始碼）的詳細內容。更多資訊請關注PHP中文網其他相關文章！