Jquery 滑块外部的自有div中的标题

我在用电脑。这对我来说效果很好，但我有一个问题。我想把标题放在bxwrapper的外面

滑块的html看起来像这样，只有div标题是由我创建的

            <div class="captions"></div>
            <ul class="bxslider">
              <li><img src="images/1.jpg" title="headline, text" /></li>
              <li><img src="images/1.jpg" /></li>
              <li><img src="images/1.jpg" title="text" /></li>
              <li><img src="images/1.jpg" title="text" /></li>
            </ul>

标题是从标题中生成的，这些标题来自具有以下代码的图像：

* Appends image captions to the DOM
     */
    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');
            // append the caption
            if (title != undefined && ('' + title).length) {
                $(this).append('<div class="bxcaptions"><span>' + title + '</span></div>');
            }
        });
    }

*将图像标题附加到DOM
*/
var appendCaptions=函数（）{
//循环遍历每个孩子
slider.children.each（函数（索引）{
//获取图像标题属性
var title=$（this.find（'img:first'）.attr（'title'）；
//附加标题
if（title！=未定义（“”+title）.length）{
$（此）。附加（“”+标题+“”）；
}
});
}

我试图设计标题的样式，使其位于滑块外部，但滑块使用溢出隐藏，因此不可能

所以我想把标题写进

，我可以按照我想要的方式定位

此外，我可能希望，标题之前，是突出显示h1和其他是正常的，但这只是额外的

谢谢你的帮助

这里是jsbin：

jquery：

var captionText = '';    
$('ul.bxslider > li > img').each(function(i,e) {
  var titleAttr = $(this).attr('title');
  if(typeof titleAttr != 'undefined') {
     var captionSplit = titleAttr.split(',');
     $('.captions').append('<div class="caption-'+i+'"></div>');
     if (captionSplit.length > 1) {
       captionText += '<h1>'+captionSplit[0]+'</h1>';
       captionText += '<span>'+captionSplit[1]+'</span>';
     } else {
       captionText += '<span>'+captionSplit[0]+'</span>';
     }
     $('.caption-'+i).html(captionText);
     captionText = '';
  }
});

var captionText=''；
$（'ul.bxslider>li>img'）。每个（函数（i，e）{
var titleAttr=$（this.attr（'title'）；
如果（标题的类型！=“未定义”）{
var captionSplit=标题拆分（'，'）；
$（'.captions'）。追加（''）；
如果（标题拆分长度>1）{
字幕文本+=''+字幕分割[0]+''；
字幕文本+=''+字幕分割[1]+''；
}否则{
字幕文本+=''+字幕分割[0]+''；
}
$（'.caption-'+i）.html（captionText）；
字幕文本=“”；
}
});

我想我有一个解决方案，但它非常肮脏！我插入这段代码

$（'.captions'）.html（slider.children.eq（slider.active.index）.find（'img:first'）.attr（'title'）

在jquery.bxslider.js第1188行的幻灯片函数末尾

如果有人有更好的解决方案，请告诉我
 我想你想要这样。
下面的代码片段是bx滑块标题的更好解决方案


jQuery（'.bxslider'）.bxslider({
下一个选择器：“#滑块下一个”，
prevSelector:“#滑块prev”，
下一步：“下一步”，
prevText:“prev”，
寻呼机：是的，
prependtxt:“示例”，
pagerType:'短'，
模式：“淡入淡出”，
是的，
onSliderLoad:函数（currentIndex）{
$（“.slider txt”）.html（$（'.bxslider li'）.eq（currentIndex）.find（“img”）.attr（“title”）；
},
onSlideBefore:函数（$slideElement、oldIndex、newIndex）{
$（“.slider txt”）.html（$slideElement.find（“img”）.attr（“title”）；
}
});
.slider txt{
颜色：红色；
}





















请注意，此脚本不支持图像标题标记中的多个逗号“，”。您需要扩展此案例的脚本。sry用于我的延迟响应！我试过了，但它似乎影响了滑块的功能，不再起作用了！