打一个轮播图HTML5代码淡隐消失
时间: 2023-03-15 08:16:19 浏览: 74
<div>
<img src="image1.jpg" style="display: none;">
<img src="image2.jpg" style="display: none;">
<img src="image3.jpg" style="display: none;">
<img src="image4.jpg" style="display: none;">
<script type="text/javascript">
var images = document.getElementsByTagName('img');
var currentImage = 0;
setInterval(function() {
images[currentImage].style.display = 'none';
currentImage = (currentImage + 1) % images.length;
images[currentImage].style.display = '';
}, 1000);
</script>
</div>
相关问题
一个html四个图片左右轮播代码
以下是一个 HTML 四个图片左右轮播的基本代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>四个图片左右轮播</title>
<style>
.container {
display: flex;
overflow: hidden;
width: 400px;
margin: 0 auto;
}
.carousel {
display: flex;
width: 1600px;
transition: transform 0.5s ease-in-out;
}
.carousel-item {
flex-shrink: 0;
width: 400px;
height: 300px;
}
.carousel-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.prev,
.next {
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
background-color: #ddd;
position: absolute;
top: calc(50% - 25px);
}
.prev:hover,
.next:hover {
cursor: pointer;
}
.prev {
left: 10px;
}
.next {
right: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="carousel">
<div class="carousel-item">
<img src="img_1.jpg" alt="图片1" />
</div>
<div class="carousel-item">
<img src="img_2.jpg" alt="图片2" />
</div>
<div class="carousel-item">
<img src="img_3.jpg" alt="图片3" />
</div>
<div class="carousel-item">
<img src="img_4.jpg" alt="图片4" />
</div>
</div>
<div class="prev"><</div>
<div class="next">></div>
</div>
<script>
const carousel = document.querySelector(".carousel");
const prev = document.querySelector(".prev");
const next = document.querySelector(".next");
let direction = 1; // 1 表示向右,-1 表示向左
let currentIndex = 0;
function slide() {
currentIndex += direction;
if (currentIndex < 0) {
currentIndex = 3;
} else if (currentIndex > 3) {
currentIndex = 0;
}
carousel.style.transform = `translateX(-${currentIndex * 400}px)`;
}
prev.addEventListener("click", () => {
direction = -1;
slide();
});
next.addEventListener("click", () => {
direction = 1;
slide();
});
</script>
</body>
</html>
```
这个代码定义了一个包含四张图片的轮播,使用了 flex 布局和 JavaScript 来实现左右切换。容器使用了 CSS 类名 `.container`,并设置了宽度、居中和 overflow:hidden 属性,以隐藏溢出的部分。轮播元素使用了 CSS 类名 `.carousel`,并设置了宽度和过渡动画属性,以实现平滑的图片切换效果。每张图片使用了 CSS 类名 `.carousel-item`,并设置了宽高和图片缩放适配属性。左右切换箭头使用了 CSS 类名 `.prev` 和 `.next`,并设置了样式和位置属性。JavaScript 部分实现了轮播的切换逻辑,使用了 transform 属性来实现图片的位移。
打一个手动轮播图的代码
好的,以下是一个简单的手动轮播图的代码:
HTML代码:
```html
<div class="carousel">
<img src="slide1.jpg" alt="Slide 1">
<img src="slide2.jpg" alt="Slide 2">
<img src="slide3.jpg" alt="Slide 3">
<img src="slide4.jpg" alt="Slide 4">
</div>
<button class="prev">Prev</button>
<button class="next">Next</button>
```
CSS代码:
```css
.carousel {
position: relative;
overflow: hidden;
width: 100%;
}
.carousel img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
.carousel img.active {
opacity: 1;
}
.prev, .next {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
background: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
border: none;
outline: none;
cursor: pointer;
}
.prev {
left: 0;
}
.next {
right: 0;
}
```
JavaScript代码:
```javascript
const carousel = document.querySelector(".carousel");
const slides = carousel.querySelectorAll("img");
const prevBtn = document.querySelector(".prev");
const nextBtn = document.querySelector(".next");
let currentSlide = 0;
function showSlide(index) {
if (index < 0) {
index = slides.length - 1;
} else if (index >= slides.length) {
index = 0;
}
slides.forEach((slide) => slide.classList.remove("active"));
slides[index].classList.add("active");
currentSlide = index;
}
showSlide(currentSlide);
prevBtn.addEventListener("click", () => {
showSlide(currentSlide - 1);
});
nextBtn.addEventListener("click", () => {
showSlide(currentSlide + 1);
});
```
这个轮播图使用了绝对定位来叠加图片,同时使用了opacity属性来实现淡入淡出的效果。两个按钮分别绑定了事件,点击按钮会调用showSlide函数,来切换图片。showSlide函数会根据传入的index参数来显示相应的图片,并更新currentSlide的值。
相关推荐
![](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)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)