1

我无法弄清楚如何在此滑块中的图像下方添加文本，它的功能非常简单，但我遇到了麻烦并认为我可能只需要重新编写它，这里是 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);
}

left-advance 函数是相同的，所以右边就足够了。任何建议都非常感谢！

4

1 回答 1

2

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

于 2013-08-23T20:01:23.200 回答