HTML與JS是目前最常用的網頁開發語言之一，它們可以很好地協同工作，為用戶提供最佳的瀏覽體驗。其中，輪播是一種常用的網頁設計元素，它可以輕松地展示多個圖像或其他媒體元素。下面介紹一種使用HTML和JS實現輪播的代碼：
<html>
<head>
<title>輪播代碼</title>
<style>
/* 設置輪播窗口大小及樣式 */
.carousel{
width:80%;
height:400px;
margin:auto;
position:relative;
}
/* 設置輪播圖像及樣式 */
.carousel img{
width:100%;
height:100%;
position:absolute;
z-index:1;
opacity:0;
transition:opacity 1s ease-in-out;
}
/* 初始顯示第一張圖 */
.carousel img:first-child{
opacity:1;
z-index:2;
}
/* 設置輪播標題樣式 */
.title{
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:rgba(0,0,0,0.5);
color:#fff;
padding:15px;
font-size:20px;
text-align:center;
}
</style>
</head>
<body>
<div class="carousel">
<img src="img1.jpg" alt="image1">
<img src="img2.jpg" alt="image2">
<img src="img3.jpg" alt="image3">
<div class="title">這是第一張圖片</div>
</div>
<script>
// 獲取輪播圖像及標題
var img = document.querySelectorAll(".carousel img");
var title = document.querySelector(".title");
// 設置輪播序號及輪播時間間隔
var count = 0;
var timer = setInterval(carousel, 3000);
// 輪播函數
function carousel(){
img[count].style.opacity = "0";
img[count].style.zIndex = "1";
count = (count+1)<img.length;
img[count].style.opacity = "1";
img[count].style.zIndex = "2";
title.innerHTML = "這是第"+(count+1)+"張圖片";
}
</script>
</body>
</html>以上代碼中，我們先定義了一個類名為“carousel”的DIV元素，其中分別包含三個IMG元素和一個DIV元素用于顯示輪播標題。然后，通過CSS樣式設置輪播窗口和輪播圖像的樣式，以及初始化第一張圖像的顯示狀態。接著，在JS代碼中，我們通過querySelectorAll()方法獲取輪播圖像的值，并設置輪播序號count和時間間隔timer。在輪播函數carousel()中，我們使用opacity屬性控制輪播圖像的透明度并改變其層級，以實現輪播效果，同時也替換了輪播標題。最后，我們使用setInterval()方法執行輪播函數，以保證輪播效果的持續性。
上一篇axios 傳json
下一篇laravel部署vue