jquery 图片层叠

基础概念

图片层叠是指在同一页面上，多个图片元素按照一定的顺序和规则进行叠加显示。在网页设计中，这通常用于创建视觉效果，如背景图、遮罩、浮层等。

类型

背景层叠：将图片作为背景，通过CSS的background属性进行层叠。
元素层叠：使用HTML元素（如<div>）包裹图片，并通过CSS的z-index属性控制层叠顺序。
动画层叠：结合jQuery的动画效果，实现动态层叠效果。

应用场景

轮播图：多个图片按顺序显示，通常配合动画效果。
遮罩效果：在图片上添加半透明遮罩，突出显示某些内容。
浮层广告：在页面上方或下方显示浮动广告图片。

示例代码

以下是一个简单的jQuery图片层叠示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片层叠示例</title>
    <style>
        .image-container {
            position: relative;
            width: 500px;
            height: 300px;
        }
        .image-layer {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        #layer1 {
            background-image: url('image1.jpg');
            z-index: 1;
        }
        #layer2 {
            background-image: url('image2.jpg');
            z-index: 2;
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <div class="image-container">
        <div id="layer1" class="image-layer"></div>
        <div id="layer2" class="image-layer"></div>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 动态调整层叠顺序
            $('#layer1').click(function() {
                $(this).css('z-index', 3);
                $('#layer2').css('z-index', 1);
            });

            $('#layer2').click(function() {
                $(this).css('z-index', 3);
                $('#layer1').css('z-index', 1);
            });
        });
    </script>
</body>
</html>