显示标题
anoSlide 本身并不支持显示标题,是通过扩展实现的。
JavaScript
$(function(){
$('.carousel ul').anoSlide({
items: 1,
speed: 500,
prev: 'a.prev',
next: 'a.next',
auto: 3000,
onStart: function(ui){
ui.slide.element.find('.caption').remove();
},
onEnd: function(ui){
var content = ui.slide.element.data('caption');
var caption = $('<div/>').addClass('caption').css({
position: 'absolute',
background: 'rgb(0,0,0)',
color: 'rgb(255,255,255)',
textShadow: 'rgb(0,0,0) -1px -1px',
opacity: 0.5,
top: -100,
left: 50,
padding: 10,
fontSize: 14 + 'px',
webkitBorderRadius: 5,
mozBorderRadius: 5,
borderRadius: 5
}).html(content);
caption.appendTo(ui.slide.element).animate({
top:50
});
}
});
});
HTML
<div class="carousel">
<a class="prev"></a>
<ul>
<li><a href="javascript:"><img src="images/slides/1.jpg"></a></li>
<li><a href="javascript:"><img src="images/slides/2.jpg"></a></li>
<li><a href="javascript:"><img src="images/slides/3.jpg"></a></li>
<li><a href="javascript:"><img src="images/slides/4.jpg"></a></li>
<li><a href="javascript:"><img src="images/slides/5.jpg"></a></li>
<li><a href="javascript:"><img src="images/slides/6.jpg"></a></li>
<li><a href="javascript:"><img src="images/slides/7.jpg"></a></li>
</ul>
<a class="next"></a>
</div>






