动网资源网
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Header Slideshow</title>
<style>
body {
margin: 0;
padding: 0;
}
header {
position: relative;
height: 400px;
}
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 400px;
object-fit: cover;
}
.active-slide {
z-index: 1; /* 设置当前显示图片的 z-index 值 */
}
.slide-nav {
position: absolute; /* 导航按钮的定位方式为绝对定位 */
bottom: 20px; /* 将导航按钮设置到 header 底部中心位置 */
left:50%;
transform:translateX(-50%);/* 左右居中 */
display:flex; /* 将导航按钮容器设置为弹性盒子，用于方便调整子元素布局 */
justify-content:center; /* 水平居中*/
align-items:center;/* 垂直居中*/
gap:.5em;/* 设置导航按钮之间的间隔距离 */
}
.slide-nav button{
border:none; /* 取消边框样式 */
background-color:#fff; /* 添加背景色 */
width:.5em; /* 设置宽度和高度为等值以便保持正方形 */
height:.5em;
border-radius:50%; /* 将按钮变成圆形 */
cursor:pointer; /* 添加手型光标样式 */
}
.slide-nav button.active {
background-color:#333; /* 设置当前导航按钮的背景色为灰黑色 */
}
</style>
</head>
<body>
<header>
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
<img src="image4.jpg" alt="">
<!-- slide-nav 按钮容器 -->
<nav class="slide-nav">
<!-- 每个导航按钮以 button 元素表示 -->
<button></button>
<button></button>
<button></button>
<button></button>
</nav>
</header>
<script src="slideshow.js"></script>
</body>
</html>JS:
// 获取幻灯片和导航按钮元素
var slides = document.querySelectorAll('header img');
var navButtons = document.querySelectorAll('.slide-nav button');
// 定义活动幻灯片和当前导航按钮的索引
var activeSlide = 0;
var activeButton = 0;
// 自动轮播功能
setInterval(function() {
// 将当前活动幻灯片和导航按钮移除 active-slide 和 active 类名
slides[activeSlide].classList.remove('active-slide');
navButtons[activeButton].classList.remove('active');
// 计算下一个活动幻灯片和导航按钮的索引值
activeSlide++;
if(activeSlide === slides.length) {
activeSlide = 0;
}
activeButton++;
if(activeButton === navButtons.length) {
activeButton = 0;
}
// 将下一个活动幻灯片和导航按钮添加 active-slide 和 active 类名
slides[activeSlide].classList.add('active-slide');
navButtons[activeButton].classList.add('active');
}, 5000); // 设置自动轮播的时间间隔为 5 秒
// 手动切换幻灯片功能
navButtons.forEach(function(button, index) {
button.addEventListener('click', function() {
// 将当前活动幻灯片和导航按钮移除 active-slide 和 active 类名
slides[activeSlide].classList.remove('active-slide');
navButtons[activeButton].classList.remove('active');
// 切换到用户点击的幻灯片和导航按钮，并更新索引值
activeSlide = index;
activeButton = index;
// 将新的活动幻灯片和导航按钮添加 active-slide 和 active 类名
slides[activeSlide].classList.add('active-slide');
navButtons[activeButton].classList.add('active');
});
});
这个代码使用了 setInterval 函数来实现自动轮播功能，同时使用了 forEach 函数来绑定每个导航按钮的点击事件并实现手动切换功能。在 HTML 中还使用了一个 slide-nav 容器，用于包含所有的导航按钮，并且利用 flexbox 布局实现水平居中效果。
