js轮播图代码左右切换
时间: 2023-09-16 07:12:48 浏览: 33
以下是一个基本的 JavaScript 轮播图左右切换实现的代码:
HTML 代码:
```html
<div class="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<img src="image1.jpg" alt="Image 1">
</div>
<div class="carousel-item">
<img src="image2.jpg" alt="Image 2">
</div>
<div class="carousel-item">
<img src="image3.jpg" alt="Image 3">
</div>
</div>
<a class="carousel-control prev" href="#">
<span class="carousel-control-icon">❮</span>
</a>
<a class="carousel-control next" href="#">
<span class="carousel-control-icon">❯</span>
</a>
</div>
```
CSS 代码:
```css
.carousel {
position: relative;
}
.carousel-inner {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel-item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.6s ease-in-out;
}
.carousel-item.active {
opacity: 1;
}
.carousel-control {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.5);
color: #fff;
text-decoration: none;
font-size: 30px;
opacity: 0.5;
transition: opacity 0.2s ease-in-out;
}
.carousel-control:hover {
opacity: 1;
}
.carousel-control.prev {
left: 0;
}
.carousel-control.next {
right: 0;
}
```
JavaScript 代码:
```javascript
var carouselItems = document.querySelectorAll('.carousel-item');
var carouselControls = document.querySelectorAll('.carousel-control');
var currentIndex = 0;
var timeoutId = null;
function goTo(index) {
if (index < 0) {
index = carouselItems.length - 1;
} else if (index >= carouselItems.length) {
index = 0;
}
carouselItems[currentIndex].classList.remove('active');
carouselItems[index].classList.add('active');
currentIndex = index;
if (timeoutId) {
clearTimeout(timeoutId);
timeoutId = null;
}
timeoutId = setTimeout(function() {
goTo(currentIndex + 1);
}, 5000);
}
carouselControls.forEach(function(control) {
control.addEventListener('click', function(event) {
event.preventDefault();
if (control.classList.contains('prev')) {
goTo(currentIndex - 1);
} else if (control.classList.contains('next')) {
goTo(currentIndex + 1);
}
});
});
goTo(0);
```
这段代码实现了一个简单的轮播图,包括左右切换按钮和自动播放功能。你可以根据需要修改样式和调整功能。