设计一个html5的类似哔哩哔哩网页广告的滚动广告代码
时间: 2024-02-15 18:03:38 浏览: 26
以下是一个HTML5类似哔哩哔哩网页广告的滚动广告代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>滚动广告</title>
<style>
#ad {
width: 100%;
height: 100px;
background-color: #f0f0f0;
position: relative;
}
#ad ul {
width: 300%;
position: absolute;
top: 0;
left: 0;
}
#ad li {
float: left;
width: 33.33%;
height: 100%;
list-style: none;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
transition: transform 0.5s ease;
}
#ad li:hover {
transform: scale(1.1);
}
#ad .indicator {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
display: flex;
}
#ad .indicator button {
width: 10px;
height: 10px;
margin-right: 5px;
border: none;
border-radius: 50%;
background-color: #999;
cursor: pointer;
}
#ad .indicator button.active {
background-color: #fff;
}
</style>
</head>
<body>
<div id="ad">
<ul>
<li style="background-image: url(ad1.jpg);"></li>
<li style="background-image: url(ad2.jpg);"></li>
<li style="background-image: url(ad3.jpg);"></li>
</ul>
<div class="indicator">
<button class="active"></button>
<button></button>
<button></button>
</div>
</div>
<script>
var indicators = document.querySelectorAll('#ad .indicator button');
var current = 0;
setInterval(function() {
current = (current + 1) % 3;
document.querySelector('#ad ul').style.transform = 'translateX(-' + (current * 100) + '%)';
indicators.forEach(function(button, index) {
button.classList.toggle('active', index === current);
});
}, 5000);
</script>
</body>
</html>
```
这个代码中,我们首先创建了一个`div`元素,它的ID为`ad`,用来容纳滚动广告和指示器。然后在`ad`元素中创建了一个`ul`元素,其中包含三个`li`元素,每个`li`元素中包含一个广告图片,并使用CSS设置了背景图。我们还添加了一个指示器,包含三个按钮,用于指示当前展示的广告。
通过CSS样式,我们设置了`ad`元素的宽度、高度、背景色和`position`属性,以及`ul`元素的宽度和`position`属性。我们还使用了CSS过渡和`transform`属性,实现了鼠标悬停时放大广告图片的效果。
在JavaScript中,我们使用了`setInterval`函数和`translateX`属性来实现滚动广告的效果,并通过循环和`classList`属性实现了指示器的切换。
需要注意的是,这只是一个简单的示例代码,实际的滚动广告可能需要更多的CSS和JavaScript代码来实现更复杂的效果。