<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style type="text/css">
/* 标签选择器 */
p {
text-align: center;
font-size: 25px;
color: cadetblue;
font-family: fantasy;
}
/* id选择器 */
#hr1 {
background-color: cadetblue;
height: 2px;
width: 75%;
}
/* 类选择器 */
.imgbox {
border-top: 5px solid cadetblue;
/* 避免因窗口变化影响图片效果 */
width: 60%;
height: 40%;
margin: 0 auto;
}
.img {
width: 60%;
height: 40%;
margin: 0 auto;
display: none;
}
/* 按钮样式和定位 */
#prevBtn, #nextBtn {
position: absolute; /* 绝对定位 */
top: 50%; /* 垂直居中 */
transform: translateY(-50%); /* 使用transform来确保垂直居中 */
padding: 10px 20px; /* 内边距 */
background-color: #f1f1f1; /* 背景色 */
border: none; /* 无边框 */
cursor: pointer; /* 鼠标悬停时变为手形 */
color: cadetblue; /* 文字颜色 */
font-size: 16px; /* 字体大小 */
}
#prevBtn {
left: 10px; /* 左侧按钮定位 */
}
#nextBtn {
right: 10px; /* 右侧按钮定位 */
}
</style>
<title>轮播图</title>
</head>
<body>
<!-- 建立一个div控件作为图片框 -->
<div class="imgBox">
<!-- alt：图片路径失败时替换显示内容 -->
<img class="img-slide img" src="img/s1.png" alt="img1">
<img class="img-slide img" src="img/s2.png" alt="img2">
<img class="img-slide img" src="img/s3.png" alt="img3">
<img class="img-slide img" src="img/s4.png" alt="img4">
<img class="img-slide img" src="img/s5.png" alt="img5">
</div>
<!-- 添加手动轮播按钮 -->
<button id="prevBtn">上一张</button>
<button id="nextBtn">下一张</button>
</body>
<script type="text/javascript">
// index：索引， len：长度
var index = 0, len;
// 类似获取一个元素数组
var imgSlides = document.getElementsByClassName("img-slide");
len = imgSlides.length;
imgSlides[index].style.display = 'block';
// 逻辑控制函数，增加方向参数
function slideShow(direction) {
if (direction === 'next') {
index++;
if (index >= len) index = 0;
} else if (direction === 'prev') {
index--;
if (index < 0) index = len - 1;
}
// 隐藏所有图片
for (var i = 0; i < len; i++) {
imgSlides[i].style.display = 'none';
}
// 显示当前图片
imgSlides[index].style.display = 'block';
}
// 定时器，间隔3s切换图片
setInterval(function() {
slideShow('next');
}, 5000);
// 为手动轮播按钮添加事件监听器
document.getElementById('prevBtn').addEventListener('click', function() {
slideShow('prev');
});
document.getElementById('nextBtn').addEventListener('click', function() {
slideShow('next');
});
</script>
</html>
023040-网页脚本设计-211501139-计算机G2101毛方智.zip
需积分: 0 180 浏览量
2024-04-19
13:15:46
上传
评论
收藏 3.37MB ZIP 举报
023040-网页脚本设计-211501139-计算机G2101毛方智.zip （6个子文件） 
网页轮播图 
轮播图.html 3KB img 
s2.png 539KB s4.png 813KB s3.png 885KB s1.png 481KB s5.png 731KB资源评论
