1

jQuery Cycleを取得して、必要な画像を動的に生成することができました。rgba(0.0.0.04)ただし、スライドの左下隅にカスタムページャー（画像スプライトを使用）、タイトル、キャプションボックス/透かし（opacy）を追加する方法に頭を悩ませています。

画像配列はすでに画像にキャプションを割り当て、画像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：var $ Vancouver =; //データ全体が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 !!!

4

1 に答える 1

2

要素にキャプションを追加し、キャプション<a>用の css を作成します

サンプル

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>

于 2012-11-21T04:21:02.023 に答える