html+css+js做一个通知栏和可以按页轮播的通知页面,求代码
时间: 2023-12-06 14:39:32 浏览: 53
以下是一个简单的通知栏和可以按页轮播的通知页面的 HTML/CSS/JS 代码示例:
HTML:
```html
<div class="notification-bar">
<div class="notification-container">
<div class="notification">这是一条通知信息</div>
<div class="notification">这是另一条通知信息</div>
</div>
</div>
<div class="notification-page">
<div class="notification-page-container">
<div class="notification-page-item">
<div class="notification-page-text">第一页的通知信息</div>
</div>
<div class="notification-page-item">
<div class="notification-page-text">第二页的通知信息</div>
</div>
<div class="notification-page-item">
<div class="notification-page-text">第三页的通知信息</div>
</div>
</div>
<div class="notification-page-controls">
<button class="prev">上一页</button>
<button class="next">下一页</button>
</div>
</div>
```
CSS:
```css
.notification-bar {
background-color: #F44336;
color: #FFF;
padding: 10px;
text-align: center;
}
.notification-container {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
}
.notification {
margin: 0 10px;
}
.notification-page {
margin-top: 30px;
}
.notification-page-container {
display: flex;
overflow-x: hidden;
}
.notification-page-item {
width: 100%;
padding: 10px;
box-sizing: border-box;
}
.notification-page-text {
background-color: #E0E0E0;
padding: 10px;
box-sizing: border-box;
height: 150px;
}
.notification-page-controls {
display: flex;
justify-content: center;
margin-top: 10px;
}
.notification-page-controls button {
margin: 0 5px;
}
```
JS:
```js
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const container = document.querySelector('.notification-page-container');
let position = 0;
const width = 300;
const numItems = container.querySelectorAll('.notification-page-item').length;
function move() {
container.style.transform = `translateX(${position}px)`;
}
prevBtn.addEventListener('click', () => {
position += width;
position = Math.min(position, 0);
move();
});
nextBtn.addEventListener('click', () => {
position -= width;
position = Math.max(position, -width * (numItems - 1));
move();
});
```
此代码示例包含一个红色通知栏和一个通知页面,该页面有三个通知,可以按页轮播。你可以根据需要修改样式和通知内容,但是通过这个示例,你可以了解如何使用 HTML/CSS/JS 创建通知栏和按页轮播的通知页面。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)