swinger.js 网站图像在光标移动时交换，如何制作图像标题？答案

【问题标题】：swinger.js website image swap on cursor move, how to make image caption?swinger.js 网站图像在光标移动时交换，如何制作图像标题？
【发布时间】：2021-07-10 19:15:12
【问题描述】：

在过去的一周里，我一直在尝试创建一个 100vh 和 vw 的网站，当您从左到右移动光标时，图像会交换。

我几乎没有以前的编码技能，但我设法使用一个名为 swinger.js 的脚本让它工作到目前为止一切都很好。但现在我想在标题中添加一个图像标题，显示正确的标题和正确的图像。但我似乎无法弄清楚如何做到这一点......

任何帮助将不胜感激！谢谢，

这是目前为止的代码

$.fn.swinger = function () {
    return this.each(function () {
        var $container = $(this);
        $container.css({
            "position": "relative"
        });
        var $images = $container.find("img");
        $images.css({
            
        });
        var $middleImage = $($images[Math.floor($images.length / 2)]);
        $middleImage.css({
            "z-index": "2",
            "position": "relative"
        });
        var columnsCount = $images.length;
        $images.each((i, img) => {
            var left = `${100 / columnsCount * i}%`;
            var width = `${100 / columnsCount}%`;
            var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`);
            $(img).after($column);
            $column.hover(() => {
                $images.css({
                    "z-index": "1",
                    "position": "absolute"
                });
                $(img).css({
                    "z-index": "2",
                    "position": "relative"
                });
            });
        })
    });
}

*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {

}

.left-holder {
    text-align: left;
    float: left;
    margin-right: 55px;
    width: 250px; }

div.swinger-container {
    text-align: center; 
    overflow: hidden; 
    width: 100vw;
height: calc(100vh);

}

div.swinger-container img {
    object-fit: cover;
-o-object-position: center center;
object-position: center center;
width: 100%;
height: 100% !important;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Style.css">
    <title>TITLE</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
     <header>
        
    </header>

    <div class="slides">
        <div class="swinger-container">
        
            <img src="https://images.unsplash.com/photo-1593642533144-3d62aa4783ec?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" class=“swinger_img” />
            
            <img src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
            
            <img src="https://images.unsplash.com/photo-1593642632559-0c6d3fc62b89?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img” />
            
        </div> 
    </div>

    <script type="text/javascript">
        $(document).ready(init);
        function init() 
        {
            $(".swinger-container").swinger();
        }
</script>

   <script src="swinger.js"></script>
    
  
</body>
</html>

【问题讨论】：

不是很清楚，你想在标题中显示什么，中显示的图像？
我想知道如何为
中的图像添加标题
通过标题，您的意思是显示的图像后面的一些文字？
没错！我正在将此设计用于投资组合网站。我希望在右上角（示例位置）出现一些描述当时显示的图像的文本。
好的，我已经为每张图片添加了标题并修改了你的浪荡公子代码

$.fn.swinger = function () { return this.each(function () { var $container = $(this); $container.css({ "position": "relative" }); var $images = $container.find("img"); $images.css({ }); var $middleImage = $($images[Math.floor($images.length / 2)]); $middleImage.css({ "z-index": "2", "position": "relative" }); var columnsCount = $images.length; $images.each((i, img) => { var left = `${100 / columnsCount * i}%`; var width = `${100 / columnsCount}%`; var $column = $(`<span style="z-index:999;position:absolute;top:0;bottom:0;left:${left};width:${width}"></span>`); $(img).after($column); $column.hover(() => { $images.css({ "z-index": "1", "position": "absolute" }); $(img).css({ "z-index": "2", "position": "relative" }); // just added one line $("header").text($(img).attr("title")); }); }) }); }

*{ margin: 0px; padding: 0px; box-sizing: border-box; } body { } .left-holder { text-align: left; float: left; margin-right: 55px; width: 250px; } div.swinger-container { text-align: center; overflow: hidden; width: 100vw; height: calc(100vh); } div.swinger-container img { object-fit: cover; -o-object-position: center center; object-position: center center; width: 100%; height: 100% !important; }