HTML5是一種被廣泛使用的Web開發技術，在開發過程中經常需要用到圖片輪播。下面就來介紹一下如何使用HTML5實現小圖片輪播。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圖片輪播</title>
<style>
.carousel {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.carousel img {
position: absolute;
width: 500px;
height: 300px;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
.carousel .controls {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
}
.carousel .controls button {
background-color: #fff;
border: none;
color: #555;
font-size: 2em;
margin: 0 10px;
outline: none;
padding: 5px;
opacity: 0.5;
transition: opacity 0.5s;
}
.carousel .controls button:hover {
opacity: 1;
}
</style>
</head>
<body>
<div class="carousel">
<img src="img1.jpg" alt="" class="active">
<img src="img2.jpg" alt="">
<img src="img3.jpg" alt="">
<div class="controls">
<button class="prev"><i class="fa fa-angle-left"></i></button>
<button class="next"><i class="fa fa-angle-right"></i></button>
</div>
</div>
<script>
var images = document.getElementsByTagName('img');
var controls = document.querySelector('.controls');
var prev = controls.querySelector('.prev');
var next = controls.querySelector('.next');
var index = 0;
var interval = setInterval(changeImage, 3000);
function changeImage() {
images[index].classList.remove('active');
index = (index + 1) % images.length;
images[index].classList.add('active');
}
prev.addEventListener('click', function() {
images[index].classList.remove('active');
index = (index - 1 + images.length) % images.length;
images[index].classList.add('active');
});
next.addEventListener('click', function() {
images[index].classList.remove('active');
index = (index + 1) % images.length;
images[index].classList.add('active');
});
</script>
</body>
</html>上述代碼使用了HTML5的一些新特性，如<meta charset="UTF-8">定義字符集、position: relative實現相對定位、transform: translateX(-50%)實現水平居中等。同時還使用了CSS3的一些新特性，如transition實現過渡效果。
實現效果為，頁面中顯示一張尺寸為500x300的圖片，每隔三秒自動切換到下一張圖片。在圖片下方有左右箭頭，可以手動切換圖片。這樣的效果可以為用戶帶來更好的視覺體驗。
上一篇html5小動畫代碼
下一篇vue請求本地css文件