用JS写一个无缝轮播图手动的
时间: 2023-04-06 16:05:10 浏览: 95
可以回答这个问题。以下是一个简单的无缝轮播图手动的JS代码:
HTML:
```
<div class="slider">
<div class="slider-wrapper">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
<img src="image4.jpg" alt="Image 4">
</div>
<a href="#" class="slider-prev">Prev</a>
<a href="#" class="slider-next">Next</a>
</div>
```
CSS:
```
.slider {
position: relative;
overflow: hidden;
}
.slider-wrapper {
display: flex;
transition: transform 0.5s ease;
}
.slider-wrapper img {
width: 100%;
height: auto;
}
.slider-prev,
.slider-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
padding: 10px;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
text-decoration: none;
}
.slider-prev {
left: 0;
}
.slider-next {
right: 0;
}
```
JS:
```
const slider = document.querySelector('.slider');
const sliderWrapper = slider.querySelector('.slider-wrapper');
const sliderItems = sliderWrapper.querySelectorAll('img');
const sliderPrev = slider.querySelector('.slider-prev');
const sliderNext = slider.querySelector('.slider-next');
const sliderItemWidth = sliderItems[0].clientWidth;
let currentIndex = 0;
sliderWrapper.style.transform = `translateX(-${currentIndex * sliderItemWidth}px)`;
sliderPrev.addEventListener('click', () => {
if (currentIndex === 0) {
currentIndex = sliderItems.length - 1;
} else {
currentIndex--;
}
sliderWrapper.style.transform = `translateX(-${currentIndex * sliderItemWidth}px)`;
});
sliderNext.addEventListener('click', () => {
if (currentIndex === sliderItems.length - 1) {
currentIndex = 0;
} else {
currentIndex++;
}
sliderWrapper.style.transform = `translateX(-${currentIndex * sliderItemWidth}px)`;
});
```
这段代码实现了一个基本的无缝轮播图,点击 Prev 和 Next 按钮可以手动切换图片。