js 全屏图片切换

在JavaScript中实现全屏图片切换，通常会涉及到HTML、CSS和JavaScript的结合使用。以下是基础概念、优势、类型、应用场景以及可能遇到的问题和解决方案：

基础概念

全屏图片切换是指在浏览器窗口中以全屏模式展示一系列图片，并且能够自动或手动切换图片。实现这一功能通常需要使用CSS来控制图片的布局和显示，JavaScript来处理图片的切换逻辑。

优势

视觉冲击力：全屏图片切换能够提供强烈的视觉效果，吸引用户注意力。
用户体验：通过自动或手动切换图片，可以增加页面的互动性和用户体验。
信息展示：适合用于展示产品、风景、艺术作品等，能够有效地传达信息。

类型

自动切换：图片按照预设的时间间隔自动切换。
手动切换：用户通过点击按钮或滑动屏幕来手动切换图片。
混合切换：结合自动切换和手动切换的功能。

应用场景

网站首页：用于展示网站的宣传图片或品牌故事。
画廊展示：用于艺术作品、摄影作品的展示。
产品展示：用于电商网站的产品图片展示。

实现示例

以下是一个简单的全屏图片切换的实现示例：

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fullscreen Image Slider</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="slider">
        <img src="image1.jpg" alt="Image 1" class="slide active">
        <img src="image2.jpg" alt="Image 2" class="slide">
        <img src="image3.jpg" alt="Image 3" class="slide">
    </div>
    <button class="prev">Prev</button>
    <button class="next">Next</button>
    <script src="script.js"></script>
</body>
</html>

CSS (styles.css)

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
}

.slider {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.slide {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide.active {
    opacity: 1;
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.prev {
    left: 10px;
}

.next {
    right: 10px;
}

JavaScript (script.js)

const slides = document.querySelectorAll('.slide');
const prevBtn = document.querySelector('.prev');
const nextBtn = document.querySelector('.next');
let currentIndex = 0;

function showSlide(index) {
    slides.forEach((slide, i) => {
        slide.classList.toggle('active', i === index);
    });
}

function nextSlide() {
    currentIndex = (currentIndex + 1) % slides.length;
    showSlide(currentIndex);
}

function prevSlide() {
    currentIndex = (currentIndex - 1 + slides.length) % slides.length;
    showSlide(currentIndex);
}

prevBtn.addEventListener('click', prevSlide);
nextBtn.addEventListener('click', nextSlide);

setInterval(nextSlide, 5000); // Auto switch every 5 seconds