jquery带小图全屏幻灯片展示

基础概念

jQuery 是一个快速、小巧且功能丰富的 JavaScript 库，它简化了 HTML 文档遍历、事件处理、动画和 Ajax 交互。全屏幻灯片展示是一种网页设计技术，通过将图片或内容扩展到整个浏览器窗口来创建视觉冲击力。

类型

手动控制：用户可以通过按钮或键盘控制幻灯片的切换。
自动播放：幻灯片可以自动切换，通常伴有定时器。
触摸支持：适用于移动设备，支持滑动切换。

应用场景

产品展示：用于展示产品图片和详细信息。
摄影作品：用于展示摄影师的作品集。
广告宣传：用于吸引用户的注意力，展示广告内容。

示例代码

以下是一个简单的 jQuery 全屏幻灯片展示示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Fullscreen Slideshow</title>
    <style>
        body, html { height: 100%; margin: 0; padding: 0; }
        .fullscreen {
            position: relative;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .fullscreen img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        .fullscreen img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="fullscreen">
        <img src="image1.jpg" alt="Image 1" class="active">
        <img src="image2.jpg" alt="Image 2">
        <img src="image3.jpg" alt="Image 3">
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            var images = $('.fullscreen img');
            var currentIndex = 0;

            function showImage(index) {
                images.removeClass('active').eq(index).addClass('active');
            }

            function nextImage() {
                currentIndex = (currentIndex + 1) % images.length;
                showImage(currentIndex);
            }

            setInterval(nextImage, 3000); // 每3秒切换一次图片
        });
    </script>
</body>
</html>