用css加js写一个表格轮播
时间: 2024-05-10 11:15:22 浏览: 8
以下是一个简单的表格轮播的实现,使用了 CSS 和 JavaScript。
HTML 部分:
```html
<div class="table-container">
<table>
<!-- 表格内容 -->
</table>
</div>
```
CSS 部分:
```css
.table-container {
width: 100%;
overflow: hidden;
position: relative;
}
table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
transition: transform .5s ease-in-out;
}
table td,
table th {
padding: 10px;
border: 1px solid #ddd;
}
```
JavaScript 部分:
```javascript
const table = document.querySelector("table");
const cells = table.querySelectorAll("td, th");
const cellWidth = cells[0].getBoundingClientRect().width;
const cellsPerRow = Math.floor(table.getBoundingClientRect().width / cellWidth);
let currentIndex = 0;
function slideTable() {
table.style.transform = `translateX(-${cellWidth * currentIndex}px)`;
currentIndex = (currentIndex + 1) % cells.length;
}
setInterval(slideTable, 3000);
```
解释:
- 首先通过 DOM 获取表格元素、单元格元素、单元格宽度等信息
- 定义一个变量 `currentIndex` 来表示当前显示的单元格的索引
- 定义一个函数 `slideTable` 来实现表格的滑动
- 使用 `setInterval` 定时调用 `slideTable` 函数,从而实现自动轮播
这个示例只是一个基础实现,可以根据需求进行调整和优化。