如何使用JavaScript和CSS實現(xiàn)簡單的輪播圖播放效果

這篇文章運用簡單易懂的例子給大家介紹如何使用JavaScript和CSS實現(xiàn)簡單的輪播圖播放效果，代碼非常詳細，感興趣的小伙伴們可以參考借鑒，希望對大家能有所幫助。

公司主營業(yè)務：成都網(wǎng)站設計、做網(wǎng)站、移動網(wǎng)站開發(fā)等業(yè)務。幫助企業(yè)客戶真正實現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚、勤奮敬業(yè)、活力青春激揚、勤奮敬業(yè)、活力澎湃、和諧高效的團隊。公司秉承以“開放、自由、嚴謹、自律”為核心的企業(yè)文化，感謝他們對我們的高要求，感謝他們從不同領域給我們帶來的挑戰(zhàn)，讓我們激情的團隊有機會用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出鞍山免費做網(wǎng)站回饋大家。

輪播圖通常是關注的焦點，用于照片畫廊或許多當代網(wǎng)站的大中心舞臺。雖然過去Adobe Flash經(jīng)常是使用CSS3和JavaScript的首選工具，但是輪播圖可以輕松實現(xiàn)而無需大量代碼。

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

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

<div class="slides">
  <img src="image/cup.jpg" >
  <img src="image/flower.jpg">
  <img src="image/flowers.jpg">
  <img src="image/strawberry.jpg">
  <img src="image/greatwall.jpg">
</div>

使用CSS在容器內(nèi)堆疊所有圖片并定義過渡（特定于瀏覽器的前綴可能必須用于過渡）：

/* 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規(guī)則，更改以交叉漸變?yōu)閯赢嫛?/p>

function nextSlide() {
    var q = function(sel) {
     return document.querySelector(sel); 
     }   
    q(".slides").appendChild(q(".slides img:first-child"));
    }
    setInterval(nextSlide, 3000)

以上就是步驟的分析，下面是完整代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<title></title>
	<script type="text/javascript">
	function nextSlide() {
	if (typeof $ == "undefined") var $ = function(sel) { return document.querySelector(sel); }	
	$(".slides").appendChild($(".slides img:first-child"));
}
setInterval(nextSlide, 3000)
	</script>
	<style type="text/css">
	img{
		width: 500px;
		height: 300px;
	}
.slides {
  box-shadow: 0px 0px 6px black;
  margin: 0 auto;
  width: 500px;
  height: 300px;
  overflow: hidden;
}

.slides img { 
  position: absolute; 
  transition: opacity 1s;
  opacity: 0;
}

.slides img:first-child { 
  z-index: 2;
  opacity: 1;
}

.slides img:last-child {
  z-index: 1;
  opacity: 1;
}
</style>
</head>
<body>
<div class="slides">
  <img src="image/cup.jpg" >
  <img src="image/flower.jpg">
  <img src="image/flowers.jpg">
  <img src="image/strawberry.jpg">
  <img src="image/greatwall.jpg">
</div>
</body>
</html>

效果如下：

如何使用JavaScript和CSS實現(xiàn)簡單的輪播圖播放效果

關于如何使用JavaScript和CSS實現(xiàn)簡單的輪播圖播放效果就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

新聞名稱：如何使用JavaScript和CSS實現(xiàn)簡單的輪播圖播放效果
文章地址：http://bm7419.com/article6/pceoog.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信公眾號、品牌網(wǎng)站制作、定制網(wǎng)站、網(wǎng)站設計、網(wǎng)站內(nèi)鏈、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容