显示标题
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>