以下是一个使用JavaScript实现全屏轮播图效果的示例代码:

HTML代码:

 

#slider {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

#slider .slides {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.8s ease-in-out;
}

#slider .slides .slide {
width: 100%;
height: 100%;
}

#slider .slides .slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

JavaScript代码(script.js):

const slider = document.getElementById('slider');
const slides = slider.querySelector('.slides');
const slideWidth = slides.clientWidth;
let currentIndex = 0;

function goToSlide(index) {
slides.style.transform = `translateX(-${slideWidth * index}px)`;
}

function nextSlide() {
currentIndex++;
if (currentIndex >= slides.children.length) {
currentIndex = 0;
}
goToSlide(currentIndex);
}

function previousSlide() {
currentIndex--;
if (currentIndex < 0) {
currentIndex = slides.children.length - 1;
}
goToSlide(currentIndex);
}

setInterval(nextSlide, 3000);

在上述代码中,首先在HTML文件中创建了一个id为"slider"的div容器,用来包含轮播图。在这个div容器中,有一个class为"slides"的div,用来容纳所有的轮播图。每张轮播图通过class为"slide"的div包裹,并包含一个img元素用于显示图片。

在JavaScript代码中,首先获取了id为"slider"的元素以及slides容器和每张轮播图的宽度。通过currentIndex变量记录当前显示的轮播图的索引。goToSlide函数用于跳转到指定索引的轮播图。nextSlide和previousSlide函数分别用于切换到下一张和上一张轮播图。

最后,通过setInterval函数每隔3秒切换到下一张轮播图。