用html,css和原生js写一个轮播图,图片切换时有淡入淡出效果
时间: 2023-03-20 17:01:39 浏览: 144
好的,以下是一个用HTML,CSS和JavaScript编写的简单轮播图,其中图片切换时包含淡入淡出效果的实现:
HTML:
```html
<div class="slideshow-container">
<div class="slide fade">
<img src="img1.jpg">
</div>
<div class="slide fade">
<img src="img2.jpg">
</div>
<div class="slide fade">
<img src="img3.jpg">
</div>
<a class="prev" onclick="plusSlides(-1)">❮</a>
<a class="next" onclick="plusSlides(1)">❯</a>
</div>
```
CSS:
```css
.slideshow-container {
position: relative;
margin: auto;
}
.slide {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.fade {
animation-name: fade;
animation-duration: 1.5s;
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.prev,
.next {
position: absolute;
top: 50%;
width: auto;
margin-top: -22px;
padding: 16px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}
```
JavaScript:
```javascript
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("slide");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].classList.remove("fade");
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = "block";
slides[slideIndex - 1].classList.add("fade");
}
```
这个轮播图有一个包含淡入淡出效果的动画,通过CSS中的“fade”类实现。在JavaScript中,“showSlides”函数用于显示当前幻灯片,它将所有幻灯片的显示方式设置为“none”,然后将要显示的幻灯片的显示方式设置为“block”,并将其“fade”类添加到其类列表中,以触发淡入淡出效果。同时,“plusSlides”函数和“currentSlide”函数用于向前或向后移动幻灯片,或直接转到指定幻灯片。
相关推荐
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)