在JS滑块中的图像下方添加文本

Adding text below the images in this JS slider

本文关键字：方添加 添加 文本 图像 JS      更新时间：2023-09-26

我很难弄清楚如何在这个滑块中的图像下面添加文本，它的功能非常简单，但我遇到了麻烦，我想我可能只需要重写它，这是html和js:

<div id="look-book-scroll">
  <a href="javascript:;" id="lookbook-left-advance"></a>
  <div id="lookbook-wrapper">
    <div class="lookbook-image">
      <%= image_tag(asset_path("img/page1.jpg")) %>
       <div class="lookbook-bl">
        <p>Hi Gus!</p>
      </div>
    </div>
    <div class="lookbook-image">
      <%= image_tag(asset_path("img/page2.jpg") ) %>
    </div>
    <div class="lookbook-image">
      <%= image_tag(asset_path("img/page3.jpg")) %>
    </div>
  </div>
  <a href="javascript:;" id="lookbook-right-advance"></a>
</div>

JS:

 // LookBook Right Click
$("#lookbook-right-advance").click(function(){
    if(lookbook_image_scrolling == false){
        lookbook_image_scrolling = true;
        if(parseInt($("#lookbook-wrapper .lookbook-image:first").css('left')) == -890){
            $("#lookbook-wrapper .lookbook-image:first").remove().insertAfter("#lookbook-wrapper .lookbook-image:last");
            $("#lookbook-wrapper .lookbook-image:last").css('left', ((lookbook_image_num - 1) * 890)+'px');
        }
        $("#lookbook-wrapper .lookbook-image").each(function(){
            $(this).animate({
                left: '-=890px'
            }, 1000, function(){
                lookbook_image_scrolling = false;
            });
        });
    }
});

此外，考虑id添加css，这可能是问题所在：

#lookbook-wrapper{
position: relative;
height: 590px;
width: 830px;
overflow: hidden;
img {
    width: 100%;
    height: 100%;
}
}
#lookbook-wrapper .lookbook-image {
    position:absolute;
    top: 0;
    z-index: 1;
    width: 830px;
}
#lookbook-wrapper .lookbook-image:first-of-type {
    z-index: 2;
}
#lookbook-left-advance {
    left: -39px;
    cursor: w-resize !important;
    @include store-sprite(lookbook_left_button);
}

左前进函数是相同的，因此右前进函数是足够的。非常感谢您的任何建议！

在.lookback-imagediv中，在图像后添加块级元素，并将文本包装在块级元素中，如<p>或<div>。由于您的定位代码似乎针对的是容器而不是图像，因此我看不到任何东西会阻止文本出现在图像下方。

相关文章：