手动轮播代码
时间: 2023-07-02 20:16:53 浏览: 44
以下是一个简单的手动轮播代码,使用 JavaScript 实现:
HTML 代码:
```html
<div class="slideshow-container">
<div class="slide">
<img src="image1.jpg">
</div>
<div class="slide">
<img src="image2.jpg">
</div>
<div class="slide">
<img src="image3.jpg">
</div>
</div>
<button class="prev" onclick="prevSlide()">Previous</button>
<button class="next" onclick="nextSlide()">Next</button>
```
CSS 代码:
```css
.slideshow-container {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slide.active {
opacity: 1;
}
.prev,
.next {
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
background-color: #fff;
border: none;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript 代码:
```javascript
// 获取轮播容器和轮播项
const container = document.querySelector('.slideshow-container');
const slides = container.querySelectorAll('.slide');
// 设置当前轮播项的索引
let currentSlideIndex = 0;
// 显示当前轮播项
slides[currentSlideIndex].classList.add('active');
// 切换到上一张轮播图
function prevSlide() {
slides[currentSlideIndex].classList.remove('active');
currentSlideIndex = (currentSlideIndex - 1 + slides.length) % slides.length;
slides[currentSlideIndex].classList.add('active');
}
// 切换到下一张轮播图
function nextSlide() {
slides[currentSlideIndex].classList.remove('active');
currentSlideIndex = (currentSlideIndex + 1) % slides.length;
slides[currentSlideIndex].classList.add('active');
}
```
说明:
- HTML 中的 `slideshow-container` 是轮播容器,`slide` 是轮播项,`prev` 和 `next` 是切换轮播图的按钮。
- CSS 中使用 `position: absolute` 和 `opacity` 属性实现轮播图的切换效果,`transition` 属性实现渐变效果。
- JavaScript 中通过 `querySelector` 和 `querySelectorAll` 获取轮播容器和轮播项,使用 `classList` 属性添加和删除 `active` 类实现轮播图的切换。切换到上一张轮播图时,使用 `(currentSlideIndex - 1 + slides.length) % slides.length` 计算出上一张轮播图的索引,切换到下一张轮播图时,使用 `(currentSlideIndex + 1) % slides.length` 计算出下一张轮播图的索引。