1

jQuery (または同様のパッケージ) を使用して、同じ Web ページに複数のスライドショー (もちろん、各スライドショーには異なる画像セットがあります) を作成することは可能ですか? もしそうなら、どのように？

すべての画像が両方のスライドショーに表示されたか、番号付けが正しくなかったか、またはその他の干渉効果が発生したため、これまでの試みはすべて失敗しました。

4

2 に答える 2

1

はい、可能です。

ここから Coda Slider コードを使用して良い結果が得られました: http://www.ndoherty.biz/demos/coda-slider/2.0/

コードは次のようになります。ここで、パネルはスライダー内の項目の 1 つです。

<div class="slider-wrap">
  <div id="slider1" class="csw">
    <div class="panelContainer">                
      <div class="panel" title="Panel 1">

また、適切な CSS、JS、jQuery とhttp://gsgd.co.uk/sandbox/jquery/easing/などのプラグインを使用して自分で作成し、滑らかなアニメーションを作成することもできます。

于 2010-02-18T00:06:39.720 に答える
1

はい、次の Cycle プラグインを使用しました: http://malsup.com/jquery/cycle/

まとめるため、各 img を 2 つの div と 2 つの div にネストしました...

<div id="before_window_wrapper">
  <div name="before_n_after_window">

    <div id="before_slide_wrapper">
      <div id="before_slide">
        <img src"my/image/directory/1.img"/>
      </div>
    <div id="slide_comment">
      <h3>person comment for this img goes here</h3>
    </div>

  </div>
</div>

<div id="before_slide_wrapper">
  <div id="before_slide">
    <img src"my/image/directory/3.img"/>
  </div>
  <div id="slide_comment">
    <h3>person comment for this img goes here</h3>
  </div>
</div>

と：

  <div id="after_window_wrapper">
    <div name="before_n_after_window">

      <div id="after_slide_wrapper"> 
        <div id="after_slide">
          <img src"my/image/directory/2.img"/>
        </div>
      <div id="slide_comment">
        <h3>person comment for this img goes here</h3>
      </div>
    </div>

    <div id="after_slide_wrapper">
      <div id="after_slide">
        <img src"my/image/directory/4.img"/>
      </div>
      <div id="slide_comment">
        <h3>person comment for this img goes here</h3>
      </div>
    </div>

  </div>
</div>

「before_n_after_window」の子は、循環される div です。

$("#before_n_after_window").each(function(index){
  $(this).cycle();
});

スライド ラッパー (before_slide_wrapper と after_slide_wrapper) は、cycle() の完全な制御下にあります。ただし、その中にネストされているものはそうではないため、スライド (before_slide と after_slide) にさらに兄弟を配置できます。したがって、「#slide_comment」div です。

「before_n_after_window」は、cycle() の半制御下にあるだけであり、それ自体と競合しない CSS コードを使用します。「#before_window_wrapper」と「#after_window_wrapper」は、完全に制御できます (css に関して)。

「#before_n_after_window」とその子ができたので、それらを繰り返し処理し、各ペアのコントロールに名前を付けてポイントします。

var i = index;
var current_slide = $(this);

// hides the pause button
$('#pause_button_'+i).hide();
//checks index for odd or even
i = (i%=2) ? ((index+1)/2) : ((index/2)+1);

$(current_slide).cycle({
  fx:    'fade',
  pager:    '#nav_' + i,
  prev:     '#previous_button_' + i,
  next:     '#next_button_' + i,
});

// I want to only show the play or pause button at any given time
$(current_slide).cycle('pause');
$('#play_button_'+i).click(function(){
  $(current_slide).cycle('resume', true); 
  $('#pause_button_'+i).show();
  $('#play_button_'+i).hide();
});
$('#pause_button_'+i).click(function() { 
  $(current_slide).cycle('pause'); 
  $('#pause_button_'+i).hide();
  $('#play_button_'+i).show();
});

上記の命名規則またはその他の命名規則に従う必要があります。実際のコントロールは、ウィンドウ内以外のどこにでも配置できます - バグの問題。

余談ですが、ページ上で複数のスライドを実行したくないので、これらのペアが循環した直後に一時停止するように設定しました。どちらを循環させるかをユーザーに選択してもらいたいと思いました。また、実行中の可能性のある他のサイクルをオフにする方法を見つけなければなりません。でも：

if(better_solution){
  return please_post;
}
于 2011-07-03T21:22:34.647 に答える