你能帮我写一个HTML推广广告吗,要有图片轮播,写个示例源码
时间: 2023-04-03 20:03:09 浏览: 82
当然可以,以下是一个简单的HTML推广广告示例源码,包含图片轮播功能:
```html
<!DOCTYPE html>
<html>
<head>
<title>HTML推广广告示例</title>
<style>
.ad-container {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
}
.ad-container img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.ad-container img.active {
opacity: 1;
}
.ad-container .controls {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
}
.ad-container .controls button {
background-color: #fff;
border: none;
padding: 5px 10px;
margin: 0 5px;
cursor: pointer;
}
.ad-container .controls button.active {
background-color: #ccc;
}
</style>
</head>
<body>
<div class="ad-container">
<img src="https://via.placeholder.com/500x300?text=Ad+1" class="active">
<img src="https://via.placeholder.com/500x300?text=Ad+2">
<img src="https://via.placeholder.com/500x300?text=Ad+3">
<div class="controls">
<button class="active"></button>
<button></button>
<button></button>
</div>
</div>
<script>
const images = document.querySelectorAll('.ad-container img');
const controls = document.querySelectorAll('.ad-container .controls button');
let index = 0;
function changeImage() {
images.forEach(image => image.classList.remove('active'));
controls.forEach(control => control.classList.remove('active'));
images[index].classList.add('active');
controls[index].classList.add('active');
index++;
if (index === images.length) {
index = 0;
}
setTimeout(changeImage, 5000);
}
changeImage();
controls.forEach((control, i) => {
control.addEventListener('click', () => {
index = i;
changeImage();
});
});
</script>
</body>
</html>
```
这个示例中,我们使用了一个 `div` 元素作为广告容器,设置了宽度和高度,并将其 `position` 属性设置为 `relative`,以便内部元素的定位。然后,我们在容器内部添加了三个 `img` 元素,分别代表三张广告图片,并将它们的 `position` 属性设置为 `absolute`,以便它们可以重叠在一起。我们还为每个 `img` 元素设置了一个 `opacity` 属性,初始值为 0,这样它们就不会显示出来。
接下来,我们使用了一个 `changeImage` 函数来实现图片轮播的效果。这个函数首先将所有 `img` 元素的 `active` 类都移除,然后将当前图片的 `active` 类添加上去。然后,它将 `index` 变量加 1,如果 `index` 的值等于图片数量,就将其重置为 0。最后,它使用 `setTimeout` 函数来延迟 5 秒后再次调用自身,实现图片轮播的效果。
我们还添加了一个 `controls` 容器,用于显示图片轮播的控制按钮。这个容器的 `position` 属性设置为 `absolute`,并将其 `bottom` 和 `left` 属性设置为 10px 和 50%,以便它可以水平居中在广告容器的底部。然后,我们在容器内部添加了三个 `button` 元素,分别代表三个控制按钮,并将它们的 `background-color` 属性设置为白色。我们还为每个按钮添加了一个 `active` 类,用于表示当前选中的按钮。
最后,我们使用了一个 `forEach` 函数来遍历所有控制按钮,并为每个按钮添加了一个 `click` 事件监听器。当用户点击某个按钮时,我们将 `index` 变量设置为该按钮的索引值,并调用 `changeImage` 函数,以便切换到对应的广告图片。
希望这个示例可以帮助你实现自己的HTML推广广告!