h5轮播图
时间: 2023-06-30 16:06:03 浏览: 56
HTML5 提供了多种轮播图实现方式,其中比较常用的是使用 CSS3 动画和 JavaScript 实现。以下是一个使用 CSS3 实现的简单轮播图示例:
HTML 代码:
```html
<div class="slider">
<div class="slides">
<img src="slide1.jpg">
<img src="slide2.jpg">
<img src="slide3.jpg">
</div>
</div>
```
CSS 代码:
```css
.slider {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.slides {
position: absolute;
top: 0;
left: 0;
width: 300%;
height: 100%;
display: flex;
transition: transform 0.6s ease-in-out;
}
.slides img {
width: 33.333%;
height: 100%;
object-fit: cover;
}
.slider input[name="r"] {
position: absolute;
z-index: 100;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 30px;
height: 30px;
opacity: 0;
cursor: pointer;
}
.slider input[name="r"]:checked + label {
background: #fff;
}
.slider input[name="r"]:checked + label:before {
transform: translateX(100%);
}
.slider input[name="r"]:nth-of-type(1):checked ~ .slides {
transform: translateX(0);
}
.slider input[name="r"]:nth-of-type(2):checked ~ .slides {
transform: translateX(-33.333%);
}
.slider input[name="r"]:nth-of-type(3):checked ~ .slides {
transform: translateX(-66.666%);
}
.slider label {
position: absolute;
z-index: 100;
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: background 0.3s ease-in-out;
}
.slider label:before {
content: '';
display: block;
width: 10px;
height: 10px;
margin: 5px;
border-radius: 50%;
background: #555;
transition: transform 0.3s ease-in-out;
}
```
JavaScript 代码:
```javascript
const slider = document.querySelector('.slider');
const slides = slider.querySelector('.slides');
const radioButtons = slider.querySelectorAll('input[name="r"]');
let currentIndex = 0;
radioButtons.forEach((radioButton, index) => {
radioButton.addEventListener('change', () => {
currentIndex = index;
slides.style.transform = `translateX(-${currentIndex * 33.333}%`;
});
});
setInterval(() => {
currentIndex = (currentIndex + 1) % 3;
radioButtons[currentIndex].checked = true;
slides.style.transform = `translateX(-${currentIndex * 33.333}%`;
}, 3000);
```
这个示例中,轮播图包含一个 `slider` 容器,其中包含一个 `slides` 容器和三个图片元素。使用 CSS3 的 `transform` 属性和过渡动画实现轮播图的切换效果,使用 JavaScript 实现自动轮播功能和用户手动切换轮播图的功能。其中,通过监听 `input` 元素的 `change` 事件实现用户手动切换轮播图,通过 `setInterval` 函数实现自动轮播功能。