html +css+js实现左边一个箭头中间内容右边一个箭头,切换内容
时间: 2024-05-15 21:13:59 浏览: 8
你可以使用以下代码实现左右箭头切换内容的效果:
```html
<div class="container">
<div class="arrow left"></div>
<div class="content">第一段内容</div>
<div class="arrow right"></div>
</div>
```
```css
.container {
display: flex;
align-items: center;
justify-content: center;
}
.arrow {
width: 50px;
height: 50px;
background-color: gray;
cursor: pointer;
}
.left {
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid white;
}
.right {
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid white;
}
.content {
margin: 0 20px;
font-size: 24px;
}
```
```javascript
const content = document.querySelector('.content');
const leftArrow = document.querySelector('.left');
const rightArrow = document.querySelector('.right');
const contents = ['第一段内容', '第二段内容', '第三段内容'];
let currentIndex = 0;
leftArrow.addEventListener('click', () => {
currentIndex = (currentIndex - 1 + contents.length) % contents.length;
content.textContent = contents[currentIndex];
});
rightArrow.addEventListener('click', () => {
currentIndex = (currentIndex + 1) % contents.length;
content.textContent = contents[currentIndex];
});
```
上述代码实现了一个左右箭头切换内容的功能。你可以根据需要修改样式和内容。