jQuery Cycle：如何添加标题、标题和自定义寻呼机图像

Question

我能够让 jQuery Cycle 动态生成我想要的图像。但是，我对如何在幻灯片的左下角添加自定义寻呼机（使用图像精灵）、标题和标题框/水印（不透明 rgba(0.0.0.04)）感到头疼。

图像数组已经将标题分配给图像的alt，并将标题分配给图像的title，如下所示：<img src="banner[i].image" alt="banner[i].caption" title="banner[i].title" />

这里是 jsFiddle：http://jsfiddle.net/rkSqj/1/

我想实现类似于http://slidesjs.com/examples/images-with-captions/ 但我不需要（下一个/上一个）控件。

我无法显示寻呼机，更不用说其他自定义设置了 >_

虽然我使用的是 jsFiddle，但为了方便，我还是添加了代码 ;-)

HTML：

<!-- #gallery.banner -->
    <div id="banner">
    </div>
<!-- /#gallery.banner -->

CSS：

@charset "utf-8";
#banner {
    width: 550px;
    height: 225px;
    float:left;
    box-shadow: -2px 15px 50px 10px #888888;
}
#banner a {
    margin: 0;
    padding: 0;
    color: #fff;
}
#banner img {
    width: 550px;
    height: 220px;
    border: 2px solid #DBDBDB;
    border-radius: 4px;

    padding: 4px;
    background-color: #F3F3F3;
}


/* Pager CSS */
#banner #pager.active {
    width:12px;
    height:13px;
    background:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png) 0px -12px;
}
#banner #pager.inactive {
    width:12px;
    height:13px;
    background:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png) 0px 0px;
}


/* Watermark CSS */
#banner #watermark {
    background-color: #000000;
    background-color: rgba(0.0.0.04);
}
#banner #watermark #title {
    color: #FFFFFF;
    font-weight: bold;
}
#banner #watermark #caption {
    color: #FFFFFF;
    font-weight: normal;
}

JS： 变量 $banner = ; //整个数据在jsFiddle里面

$(document).ready(function(){ $().append(' ');

for( $i = 0; $i < $banner.length; ++$i){
    $('#banner').append('<a href="' + $banner[$i].link + '"><img src="' + $banner[$i].image + '" alt="' + $banner[$i].caption + '" titile="' + $banner[$i].titile + '" /></a>');
}

$('#banner').cycle( {
    fx: 'fade',
    timeout: 1500,
    speed: 4000,
    pager: "#pager",
});

});

=== 编辑（2012 年 11 月 21 日）===
最终修订：http://jsfiddle.net/omarjuvera/WX77f/18/

谢谢@eicto!!!

Answer 1

为您的<a> 元素添加标题，为标题制作一个CSS

sample

JS：

for( $i = 0; $i < $banner.length; ++$i){
        $('#banner').append('<a href="' + $banner[$i].link 
          + '"><img src="' + $banner[$i].image + '" alt="' + $banner[$i].caption + '" titile="'          
          + $banner[$i].titile
          + '" /><div class="caption" style="bottom:0">' 
          + $banner[$i].caption + '</div></a>');
    }

CSS

a .caption {
    margin-top: -10px;
    color:white;
    text-decoration: none;
    position: absolute;
    text-align: center;
    background: black;
    opacity: 0.6;
    width: 100%;
}

关于寻呼机，循环有回调函数来生成寻呼机，所以我只是生成了与其他插件相同的元素：

http://jsfiddle.net/oceog/rkSqj/14/

$('#banner').cycle( {
        fx: 'fade', 
        timeout: 15000, 
        speed: 400,
        pager: "#pager",
        //build new pager!
        pagerAnchorBuilder: function(index,dom) {
        console.log(index,dom);
        return "<li><a href='#'>"+index+"</li>";
}
});

CSS：

#pager {
    margin:0px auto 0;
    top: 30px;
    width:100px;
    position: relative;
    z-index: 1005;
}

#pager li {
    float:left;
    margin:0 1px;
}

#pager li a {
    display:block;
    width:12px;
    height:0;
    padding-top:12px;
    float:left;
    overflow:hidden;
    background-image:url(http://slidesjs.com/examples/images-with-captions/img/pagination.png);
    background-position:0 0;
}
#pager li.activeSlide a {
     background-position:0 -12px;  
}
​

我刚刚添加到 html <ul id="pager"></ul>