我正在使用bxslider http://bxslider.com/。它对我来说非常有效,但我有 1 个问题。我想要 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>');
}
});
}
我尝试将标题设置为位于滑块之外的样式,但滑块使用溢出隐藏,因此这是不可能的。
所以我希望将标题写入<div class="captions"></div>
我可以按照我想要的方式定位它。
此外,我可能希望 , 之前的标题用 h1 突出显示,其余部分是正常的,但这只是额外的。
感谢您的帮助!
这里是 jsbin:http://jsbin.com/ikokex/3 http://jsbin.com/ikokex/3
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 = '';
}
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)