HTML5 中，焦點圖輪播是網頁設計中很常見的一種交互效果，可以讓頁面更加動態(tài)、生動。下面是一個使用 HTML5 的輪播代碼樣例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>焦點圖輪播樣例</title>
<style>
/* 輪播容器 */
.slideshow {
max-width: 1000px;
position: relative;
margin: auto;
}
/* 圖片及標題 */
.slideshow img {
width: 100%;
height: auto;
}
.slideshow h2 {
position: absolute;
bottom: 0;
left: 0;
padding: 10px 20px;
background-color: rgba(0, 0, 0, 0.5);
color: white;
margin: 0;
width: 100%;
}
/* 輪播按鈕 */
.slideshow button {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 32px;
border: none;
background-color: transparent;
color: white;
cursor: pointer;
}
.slideshow #prev {
left: 0;
}
.slideshow #next {
right: 0;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg" alt="圖片1">
<h2>圖片標題1</h2>
<button id="prev">< 前一張</button>
<button id="next">后一張 ></button>
</div>
</body>
</html>通過以上代碼，我們可以看到輪播容器的樣式設置，包括最大寬度、定位、自動居中等。其中，圖片及標題樣式都是絕對定位，標題在圖片的底部，透明度設置了半透明的黑色背景。輪播按鈕的樣式也通過絕對定位來實現，并設置了前后按鈕分別在輪播容器的左右兩側。
在 JavaScript 方面，我們需要添加一些事件監(jiān)聽和處理函數，讓輪播可以實現自動播放、點擊前后按鈕切換等功能。下面是一些偽代碼：
var slideshow = document.querySelector('.slideshow');
var prev = document.querySelector('#prev');
var next = document.querySelector('#next');
var images = slideshow.querySelectorAll('img');
var titles = slideshow.querySelectorAll('h2');
var index = 0;
var timer = null;
function playSlide() {
// 自動播放下一張圖片
}
function stopSlide() {
// 停止自動播放
}
function showSlide(n) {
// 顯示第 n 張圖片
}
prev.addEventListener('click', function() {
showSlide(index -= 1);
});
next.addEventListener('click', function() {
showSlide(index += 1);
});
slideshow.addEventListener('mouseenter', stopSlide);
slideshow.addEventListener('mouseleave', playSlide);
playSlide();使用上述代碼，我們就可以實現一個簡單的 HTML5 焦點圖輪播效果了。
上一篇css響應式布局阮一峰
下一篇移動端Css圖片九宮格