根据后面的图像更改标题颜色

Question

我正在开发一个投资组合网站，该网站是一个全浏览器大小的容器，当从左向右移动光标时图像会交换。我使用名为 swinger.js 的 jquery 脚本实现了这一点。我在为此添加字幕时遇到了一些麻烦，但昨晚在此处的一些帮助下，我使用 alt 属性使其正常工作。现在的问题是我想要一些白色的标题和其他黑色的标题（取决于它背后的图像）并且我希望网站标题也发生同样的情况。我在 img src 标签内添加了一个 class 来指定哪个应该是哪个。 class=“swinger_img_white”为白色字幕，class=“swinger_img_black”需要为黑色时但是我无法让它工作。

我的编码经验只有一两周，我能走到这一步全靠运气、帮助和对其他网站代码的奉献精神。任何帮助将不胜感激！

*注意：带标题我只是指以任何可能的方式与图像一起出现的一些文本（解释它）。不必像网页设计中使用的字幕那样构建，只需工作即可。

这是我现在的简化版本：

$.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"
                });
                // this was added last night for the captions
                $(".caption").text($(img).attr("alt"));

        
            });
        })
    });
}

*{
    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; /* ensures the image is always in the h-middle */
    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;
  }

  header {
    width: 100%;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 10px 10px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    margin-top: -2px;
    text-align: center;
    z-index: 100;
    -webkit-transition: all .2s;
    transition: all .2s; }
    header.header-about {
      color: white !important;
      background-color: white; }
    header h1, header h2, header .about {
      font-size: 1em;
      font-weight: 400;
      display: block;
      line-height: 1.2em;
      margin-bottom: 0;
      padding-bottom: 0; }
    header h1 {
      text-align: left; }
    header a {
      text-decoration: none;
      color: white;
      line-height: 1; }
    header .about {
      text-align: left;
      padding-bottom: 2px; }

      .left-holder{
          color:white
      }

        .caption {
            text-align: right;
            float: right;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<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>website title</title>
    <script src="./jquery-3.6.0.min.js"></script>
</head>
<body>
     <header>
        <div class="left-holder">
            <h1>my name</h1> 
            <h2>what I do</h2>
        </div>
        <div class="caption">

        </div>
       
    </header>

    <div class="slides">
        <div class="swinger-container">
        
            <img src="https://images.unsplash.com/photo-1447703693928-9cd89c8d3ac5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1951&q=80" class=“swinger_img_white” alt="Caption 1"/>
            <img src="https://images.unsplash.com/photo-1502239608882-93b729c6af43?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 2"/>
            <img src="https://images.unsplash.com/photo-1516557070061-c3d1653fa646?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 3"/>
            <img src="https://images.unsplash.com/photo-1468657988500-aca2be09f4c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_white” alt="Caption 4"/>
            <img src="https://images.unsplash.com/photo-1488554378835-f7acf46e6c98?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1951&q=80" class=“swinger_img_white” alt="Caption 5"/>
            <img src="https://images.unsplash.com/photo-1491895200222-0fc4a4c35e18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1567&q=80" class=“swinger_img_black” alt="Caption 6"/>
            <img src="https://images.unsplash.com/photo-1517816743773-6e0fd518b4a6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80" class=“swinger_img_black” alt="Caption 7"/>
            <img src="https://images.unsplash.com/photo-1548685913-fe6678babe8d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1923&q=80" class=“swinger_img_black” alt="Caption 8"/>
            
        </div> 
    </div>

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

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

Answer 1

如果你在数据属性中保留一些关于条件的信息，我会很好，比如：

<img src="https://..." data-color="white" alt="Caption 1"/>
<img src="https://..." data-color="black" alt="Caption 2"/>

然后您可以使用 .css 方法更改标题的颜色，您将从 data-color 属性传递值，如下所示：

$(".caption")
    .text($(img).attr("alt"))
    .css('color', $(img).data('color'));

根据后面的图像更改标题颜色

change caption color depending on image behind it

html

javascript

css

jquery

caption