首頁 >web前端 >js教程 >JavaScript和CSS實現的簡單的輪播圖播放效果(附原始碼)

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

不言
不言原創
2018-11-07 15:34:092434瀏覽

輪播圖通常是關注的焦點,用於照片畫廊或許多當代網站的大中心舞台。雖然過去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&#39;s faded in. */
  .slides img:first-child { 
  z-index: 2; 
  /* frontmost */
  opacity: 1;
  }
  /* the last image is the previous slide. it&#39;s behind the current slide and it&#39;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實現的簡單的輪播圖播放效果(附原始碼)

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn