你能帮我写一个HTML推广广告吗,要有图片轮播,要适应屏幕大小,要有文字介绍,写个示例源码
时间: 2023-04-03 18:03:10 浏览: 57
当然可以,以下是一个简单的HTML推广广告示例源码,其中包括图片轮播和文字介绍,并且可以适应屏幕大小:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML推广广告示例</title>
<style>
.container {
max-width: 100%;
height: auto;
position: relative;
overflow: hidden;
}
.container img {
max-width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.container img.active {
opacity: 1;
}
.container .text {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
box-sizing: border-box;
font-size: 16px;
}
</style>
</head>
<body>
<div class="container">
<img class="active" src="image1.jpg" alt="广告图片1">
<img src="image2.jpg" alt="广告图片2">
<img src="image3.jpg" alt="广告图片3">
<div class="text">
<p>这是一个HTML推广广告示例,包括图片轮播和文字介绍。</p>
<p>这个广告可以适应屏幕大小,让用户在不同设备上都能看到完整的内容。</p>
</div>
</div>
<script>
var images = document.querySelectorAll('.container img');
var index = 0;
setInterval(function() {
images[index].classList.remove('active');
index = (index + 1) % images.length;
images[index].classList.add('active');
}, 5000);
</script>
</body>
</html>
```
希望这个示例对你有所帮助!