显示标题

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>

dowebok.com 说 明 下 载