CSS HTML 焦点图 有左右滑动按钮
时间: 2023-09-13 20:07:31 浏览: 70
可以使用 CSS 和 JavaScript 实现一个左右滑动的焦点图,并添加左右滑动按钮。以下是一个简单的示例:
HTML 代码:
```html
<div class="slider">
<div class="slides">
<img src="image1.jpg" alt="">
<img src="image2.jpg" alt="">
<img src="image3.jpg" alt="">
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
</div>
```
CSS 代码:
```css
.slider {
position: relative;
overflow: hidden;
}
.slides {
display: flex;
width: calc(100% * 3);
transition: transform 0.5s ease;
}
.slides img {
width: calc(100% / 3);
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
font-size: 1.5rem;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript 代码:
```javascript
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
const slides = document.querySelector('.slides');
let currentSlide = 0;
prevBtn.addEventListener('click', () => {
currentSlide--;
if (currentSlide < 0) {
currentSlide = 2;
}
updateSlidePosition();
});
nextBtn.addEventListener('click', () => {
currentSlide++;
if (currentSlide > 2) {
currentSlide = 0;
}
updateSlidePosition();
});
function updateSlidePosition() {
slides.style.transform = `translateX(-${currentSlide * 100}%)`;
}
```
注意:以上代码只是一个简单的示例,实际应用中还需要考虑响应式设计、自动播放等问题。
相关推荐
![](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)
![7z](https://img-home.csdnimg.cn/images/20210720083312.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)