h5轮播图
时间: 2023-06-30 22:03:49 浏览: 62
H5轮播图可以通过CSS3和JavaScript来实现,下面是一个简单的示例:
HTML代码:
```
<div class="slideshow">
<img src="img1.jpg" alt="Slide 1">
<img src="img2.jpg" alt="Slide 2">
<img src="img3.jpg" alt="Slide 3">
</div>
```
CSS代码:
```
.slideshow {
position: relative;
overflow: hidden;
}
.slideshow img {
position: absolute;
top: 0;
left: 0;
opacity: 0;
transition: opacity 1s ease-in-out;
}
.slideshow img:first-child {
opacity: 1;
}
.slideshow img.active {
opacity: 1;
}
.slideshow .prev, .slideshow .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 1;
cursor: pointer;
}
.slideshow .prev {
left: 0;
}
.slideshow .next {
right: 0;
}
```
JavaScript代码:
```
var slides = document.querySelectorAll('.slideshow img');
var currentSlide = 0;
var slideInterval = setInterval(nextSlide, 5000);
function nextSlide() {
slides[currentSlide].className = '';
currentSlide = (currentSlide + 1) % slides.length;
slides[currentSlide].className = 'active';
}
function prevSlide() {
slides[currentSlide].className = '';
currentSlide = (currentSlide - 1 + slides.length) % slides.length;
slides[currentSlide].className = 'active';
}
var prev = document.createElement('span');
prev.className = 'prev';
prev.innerHTML = '❮';
prev.addEventListener('click', prevSlide);
document.querySelector('.slideshow').appendChild(prev);
var next = document.createElement('span');
next.className = 'next';
next.innerHTML = '❯';
next.addEventListener('click', nextSlide);
document.querySelector('.slideshow').appendChild(next);
```
以上代码实现了自动轮播和左右箭头控制轮播的功能,你可以根据需要进行修改和优化。