html四张图片轮播
时间: 2023-11-22 17:48:47 浏览: 33
以下是一个简单的HTML轮播图的实现方法,使用了CSS和JavaScript:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<style>
/* 轮播图容器 */
#slider {
width: 600px;
height: 400px;
position: relative;
overflow: hidden;
}
/* 图片容器 */
#slider .slides {
width: 2400px;
height: 400px;
position: absolute;
top: 0;
left: 0;
}
/* 图片 */
#slider .slides img {
float: left;
width: 600px;
height: 400px;
}
/* 标题 */
#slider .title {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 24px;
line-height: 50px;
text-align: center;
}
/* 小方块容器 */
#slider .dots {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
}
/* 小方块 */
#slider .dots span {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
background-color: #fff;
margin: 0 5px;
cursor: pointer;
}
/* 当前小方块 */
#slider .dots span.active {
background-color: #f00;
}
</style>
</head>
<body>
<div id="slider">
<div class="slides">
<img src="img1.jpg" alt="图片1">
<img src="img2.jpg" alt="图片2">
<img src="img3.jpg" alt="图片3">
<img src="img4.jpg" alt="图片4">
</div>
<div class="title"></div>
<div class="dots">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script>
// 获取元素
var slider = document.getElementById('slider');
var slides = slider.querySelector('.slides');
var title = slider.querySelector('.title');
var dots = slider.querySelectorAll('.dots span');
// 初始化
var index = 0; // 当前图片的索引
var timer = null; // 定时器
show(); // 显示第一张图片
// 定时切换图片
timer = setInterval(function() {
index++;
if (index >= dots.length) {
index = 0;
}
show();
}, 3000);
// 鼠标悬停在小方块上时切换图片
for (var i = 0; i < dots.length; i++) {
dots[i].index = i;
dots[i].onmouseover = function() {
index = this.index;
show();
};
}
// 显示当前图片
function show() {
slides.style.marginLeft = -index * 600 + 'px';
title.innerHTML = slider.querySelectorAll('img')[index].getAttribute('alt');
for (var i = 0; i < dots.length; i++) {
dots[i].className = '';
}
dots[index].className = 'active';
}
</script>
</body>
</html>
```