1

最近、作業中の Web サイトのトランジション スライダーに使用したい jQuery サイクル オプションを発見しました。サイクル Web サイトでさまざまなデモを調べたところ、pageAnchorBuilder オプションを使用するデモが見つかりました。スクリプトのコードは次のとおりです。

$(document).ready(function () {
$('#slideshow') 
    .before('<ul id="navigation">') 
    .cycle({ 
        fx:     'fade', 
        timeout: 2000, 
        pager:  '#navigation',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li class="slide"><img src="' + slide.src + '" width="50" height="50" /></li>'; 
            }
    });
});

このコードは、ナビゲーション リスト アイテムのサムネイルを表示するためのものとして機能します。ただし、ナビゲーション リスト アイテムの画像には、slide.src のサムネイルを使用したくありません。リスト項目に 'class=activeSlide' を指定すると別の任意の画像 (button-hover.png など) に変更されるリスト項目に任意の画像 (button.png など) を使用したいと考えています。

4

1 に答える 1

0

私は答えを発見しました。ちょっとしたハックのように感じますが、おそらくもっとセマンティックな方法で行うことができますが、私が探していた効果が得られます. とにかく、スクリプトは次のように変更されました。

$(document).ready(function () {
    $('#slideshow') 
    .before('<ul id="navigation">') 
    .cycle({ 
        fx:     'fade', 
        timeout: 4000, 
        pager:  '#navigation',
        pagerAnchorBuilder: function(idx, slide) { 
                return '<li class="slide"></li>'; 
            }
    });
});

変更は、<li>タグの間に入力される内容にありました。スイッチは次のものからのものでした：

return '<li class="slide"><img src="' + slide.src + '" width="50" height="50" /></li>';

に：

return '<li class="slide"></li>';

挿入された画像はタグから削除されます。効果を得るには、css を次のように変更する必要があります。

li.slide  {
    display: inline-block;
    width: 10px;
    height: 10px
    background-image: url("button.png");
    background-repeat: no-repeat;
    background-position: center center;
}

li.slide.activeSlide {
    background-image: url("button-hover.png");
}

の css<li>がアクティブに変更され、クラス activeSlide が対応する に含まれるようになり<li>ます。したがって、css で li.slide.act をスタイリングすることにより、li.slide の css をオーバーライドして効果を得ることができます。

于 2012-11-14T10:15:18.753 に答える