html全屏自动轮播特效代码
在以上的代码中，我们首先定义了一个容器。容器的宽度设置为100%， 高度设置为100vh（viewport height，即视窗的高度），这样就可以让轮播图占满整个页面。接下来的.slide类代表了每一张轮播图，其中我们使用了position:absolute来将其定位到容器的左上角，并且设置了width和height为100%，使得图片占满整个slide元素。最后使用了object-fit: cover来裁剪图片适应不同的屏幕尺寸。在html部分中，我们将三张轮播图添加到了.container里，其中第一张轮播图默认添加了.active类，这样在页面刚开始加载时就可以显示第一张轮播图。在JavaScript部分中，我们使用了querySelectorAll来获取所有的slide元素，然后定义了一个changeSlide函数，并使用了classList来操作元素的类。在changeSlide函数中，我们首先获取了当前显示的.slide元素，并将其.active类删除。接着，我们检查当前.slide元素的下一个兄弟节点（nextElementSibling）是否存在，如果存在，就将其添加active类，以此来切换到下一张轮播图。如果下一个兄弟节点不存在，说明已经到了最后一张轮播图，那么我们就将第一张轮播图添加.active类以重新开始轮播。最后，我们使用了setInterval函数来每隔5秒调用一次changeSlide函数，以自动进行轮播展示。使用这些HTML和JavaScript代码，你就可以实现一个自动轮播的全屏特效了。!DOCTYPE html>
html>
head>
style>
* { margin: 0; padding: 0; }
.container { width: 100%; height: 100vh; position: relative; }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
img { width: 100%; height: 100%; object-fit: cover; }
.active { z-index: 1; }
/style>
/head>
body>
div class="container">
div class="slide active"> img src="1.jpg"> /div>
div class="slide"> img src="2.jpg"> /div>
div class="slide"> img src="3.jpg"> /div>
/div>
script>
const slides = document.querySelectorAll('.slide');
const changeSlide = () => {
const current = document.querySelector('.active');
current.classList.remove('active');
if (current.nextElementSibling) {
current.nextElementSibling.classList.add('active');
} else {
slides[0].classList.add('active');
}
}
setInterval(changeSlide, 5000);
/script>
/body>
/html>
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： html全屏自动轮播特效代码
本文地址： https://pptw.com/jishu/531025.html