html5全屏图片左右滑动轮播代码
时间: 2023-11-23 22:03:20 浏览: 41
HTML5全屏图片左右滑动轮播可以通过以下代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
margin: 0;
padding: 0;
overflow: hidden;
}
.slideshow-container {
position: relative;
width: 100%;
height: 100vh;
overflow: hidden;
}
.slide {
display: none;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 100%;
transition: left 1s;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="slide">
<img src="image1.jpg" style="width:100%; height:100%;">
</div>
<div class="slide">
<img src="image2.jpg" style="width:100%; height:100%;">
</div>
<div class="slide">
<img src="image3.jpg" style="width:100%; height:100%;">
</div>
</div>
<script>
var index = 0;
var slides = document.querySelectorAll('.slide');
function showSlide(n) {
if (n >= slides.length) { index = 0; }
if (n < 0) { index = slides.length - 1; }
for (var i = 0; i < slides.length; i++) {
slides[i].style.left = "100%";
}
slides[index].style.left = "0";
}
function nextSlide() {
index++;
showSlide(index);
}
function prevSlide() {
index--;
showSlide(index);
}
showSlide(index);
setInterval(function() {
nextSlide();
}, 5000); // 每5秒切换图片
</script>
</body>
</html>
```
以上代码实现了一个全屏图片轮播效果,其中包括三张图片,并且实现了点击左右箭头按钮或自动定时切换图片的功能。这样就可以在HTML5中实现全屏图片左右滑动轮播效果。