jquery全屏焦点图代码

jQuery 全屏焦点图是一种网页设计元素，它允许将一组图片以全屏的方式展示，并且可以自动切换焦点。这种效果通常用于网站的首页或者产品展示页面，以吸引用户的注意力。

基础概念

全屏焦点图通常包括以下几个部分：

图片容器：用于存放全屏图片的容器。
图片列表：包含所有需要展示的图片的列表。
导航控件：可选，用于手动切换图片。
自动播放功能：可以设置定时器自动切换图片。

类型

水平滑动：图片在水平方向上滑动切换。
垂直滑动：图片在垂直方向上滑动切换。
淡入淡出：图片之间通过淡入淡出的方式切换。
3D效果：提供3D旋转或其他3D效果切换。

应用场景

网站首页：用于展示公司或产品的核心信息。
产品展示页：用于展示产品的多角度图片。
活动宣传页：用于宣传活动的主题和亮点。

示例代码

以下是一个简单的 jQuery 全屏焦点图的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 全屏焦点图</title>
    <style>
        #fullscreen-slider {
            width: 100%;
            height: 100vh;
            overflow: hidden;
            position: relative;
        }
        #fullscreen-slider img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            transition: opacity 1s ease-in-out;
        }
        #fullscreen-slider img.active {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div id="fullscreen-slider">
        <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-slider 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>