0

サイトを構築している皆さん、2 つの質問があります。サイトは当分の間ここでホストされています: http://wesbos.com/tf/shutterflow/?cat=5 .

2 つの質問があります

。1. 現在、スライドショーは、画像を保持する .slide のクラスで div を回転させます。その内部では、.cover のクラスが data/ 半透明の背景でオーバーレイします。

これを試してみると、正常に読み込まれます (.cover の CSS display:none のため) が、サムネイルをクリックすると両方の div が読み込まれ、display:none が .cover div に適用されません。ホバーしたときにのみフェードアウトします。私はJquery Cycleを使用しており、私のコードは次のようになります:(shutterflow.jsにあります)

$(document).ready(function() {
$('#slideshow').cycle({
    fx:     'fade', 
next:   '#next', 
    pause: 1,
prev:   '#prev',
    pause:  '#pause',
    pager:  '.thumbs',
    pagerAnchorBuilder: function(idx, slide) {
                    var src = $('img',slide).attr('src');
                    return '<li><a href="#"><img src="' + src + '"  height="75" /></a></li>';
            } 
});

と

        $(document).ready(      
              function() {
                $('.slide').hover(
                  function() {  $(".cover").fadeIn('500'); },
                  function () { $(".cover").fadeOut('500');
                 }  );
        }  );



サムネイルをクリックしたときに .cover を display:none として読み込むにはどうすればよいですか?


2. 2 番目の質問はかなり簡単です。上記のスニペットを見ると、スライドショーを一時停止状態で読み込み、再生リンクがクリックされたときにのみ実行する必要があります。

4

1 に答える 1

0

編集:最初の質問に対する回答を追加しました。

最初の質問: pagerClick オプションをサイクル関数に追加します。

pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();}

2 番目の質問は簡単に思えます: プラグインのドキュメントに基づくと:

再生/一時停止ボタンがあると仮定します

btnPlayPause.toggle(function(){$("#slideshow").cycle('pause');},function(){$("#slideshow.cycle('resume');})

これらの機能で再生/一時停止ボタンの画像を変更することもできます。こちらもご覧ください

于 2009-08-17T02:43:09.147 に答える