只有CSS和HTML 无JS 焦点图 有左右滑动按钮
时间: 2024-04-24 19:07:11 浏览: 19
可以通过CSS实现焦点图的左右滑动按钮效果,但是需要使用JavaScript来控制焦点图的滑动。以下是一个示例代码,供您参考:
HTML代码:
```
<div class="slider">
<div class="slides">
<img src="img1.jpg">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<a class="prev" onclick="prevSlide()">❮</a>
<a class="next" onclick="nextSlide()">❯</a>
</div>
```
CSS代码:
```
.slider {
position: relative;
overflow: hidden;
}
.slides {
display: flex;
transition: transform 0.5s ease-in-out;
}
.slides img {
width: 100%;
height: auto;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
font-size: 30px;
color: white;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript代码:
```
var slideIndex = 0;
var slides = document.querySelectorAll(".slides img");
var totalSlides = slides.length;
function showSlide() {
if (slideIndex < 0) { slideIndex = totalSlides - 1; }
if (slideIndex >= totalSlides) { slideIndex = 0; }
var slideWidth = slides[0].clientWidth;
var slideOffset = -1 * slideIndex * slideWidth;
document.querySelector(".slides").style.transform = "translateX(" + slideOffset + "px)";
}
function prevSlide() {
slideIndex--;
showSlide();
}
function nextSlide() {
slideIndex++;
showSlide();
}
showSlide();
```
通过以上代码,您可以实现一个带左右滑动按钮的焦点图。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)