Question

这个问题已被提出，但没有答案 - 我相信因为没有提供足够的信息。

我使用bxslider作为我的模板。看这里： http://bxslider.com/examples/image-slideshow-captions

我可以使用“title”属性创建一个非常简单的标题，但我希望能够创建字幕（具有不同的属性，如较小的文本），我想将其转换为链接。我已经尝试在容器中实现一个div，显然，我不能让它与滑块同步而不用jquery实现它。我也尝试过编辑CSS无济于事。

如何添加不仅仅是图片标题的标题？就像一个覆盖图片的div？

Answer 1

您甚至不需要使用bxslider提供的字幕选项。将标题添加为构成幻灯片的li标记的一部分。这就是字幕：真正的选项无论如何，即将div与bx-caption类附加到幻灯片上。

例如：

  <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="caption1"> 
        <span>Image 1</span>
        <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
      </div>
 </li>

这种方式使用css，你也可以使用字体大小。

这是小提琴http://jsfiddle.net/s2L9P/

Answer 2

我认为我解决了你的问题，但我无法测试它，因为你的小提琴不能像你创建它那样工作。

使用以下代码更改Appends image captions to the DOM的代码：

    /**
     * Appends image captions to the DOM
     * NETCreator enhancement (http://www.netcreator.ro)
     */
    var appendCaptions = function(){
        // cycle through each child
        slider.children.each(function(index){
            // get the image title attribute
            var title = $(this).find('img:first').attr('title');
            var nc_subtitle = $(this).find('img:first').attr('nc-subtitle');
            // append the caption
            if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) {
                $(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>');
            }
        });
    }

现在，您可以为字幕标题添加字幕：

<a href ="page.php">
    <img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/>
</a>

您可以使用CSS类nc_subtitle来根据需要设置字幕样式。

希望它有所帮助！

修改的

更改您分享的整个JavaScript：

http://pastebin.com/0fvUezg1

用这个HTML：

http://pastebin.com/T038drDV

有效。

使用bxslider的高级字幕

2 个答案: