javascript - jQuery Cycle : How to add a title, 标题和自定义寻呼机图像

Question

我能够让 jQuery Cycle 动态生成我想要的图像。但是，我对如何在幻灯片的左下角添加自定义寻呼机(使用图像 Sprite )、标题和标题框/水印(不透明 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/ 的东西但我不需要 (Next/Prev) 控件。

我无法让寻呼机显示出来，更不用说其他自定义设置了 >_<非常感谢您的帮助。

虽然我使用的是 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:变种$旗帜=;//所有数据都在jsFiddle中

$(文档).ready(函数(){ $().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%;
}

关于分页器，cycle 有回调函数来生成分页器，所以我只是生成了与其他插件相同的元素:

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>