1

新しいクラスとそれらを参照するスクリプトを手動で作成せずに、すべて同じページにある複数のjqueryサイクルスライドショーに複数のページャーを関連付ける方法を理解しようとしています。

私のHTMLは次のようになります。

<!-- PROJECT -->
        <div title="Challenge Factor" class="project">

          <div class="projectinfo-top">
                <div class="project-title"><h2>Challenge Factor</h2></div>
                <div class="bulletnav"></div>
          </div>

            <div class="minislideshow-bg">
                <div class="minislideshow">
                  <img src="project-slides/challengefactor-1.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-2.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-3.jpg" width="729" height="425" alt="Challenge Factor" />
                  <img src="project-slides/challengefactor-4.jpg" width="729" height="425" alt="Challenge Factor" />
                </div>
            </div>

            <div class="projectinfo-text">

                <p>ChallengeFactor.com is a new social network based on user created challenges that push members to better themselves and the lives around them. Webphibian was contacted to develop the social network from scratch and tie it into Challenge Factor's current branding. My role on this project was to design the social network side of the site, redesign their current site, and all front-end development.</p>
            </div><!--/project info text-->

        </div><!--/PROJECT-->

私のJqueryはのように見えます。

$(function() { $('.minislideshow').cycle({ timeout: 0, pager:'.bulletnav' }); });

複数のプロジェクトがリストされており、それぞれに独自のスライドショーdiv.minislideshowがあります。各プロジェクトインスタンスのdiv.bulletnav内にページャーリンクを配置したいと思います。

どんな助けでも大歓迎です。さらに情報が必要な場合は、私に知らせてください。ありがとう。

4

2 に答える 2

13

私はこれが本当に役に立ちました：

http://forum.jquery.com/topic/jquery-cycle-plugin-set-up-multiple-containers-with-same-options

基本的に、スライドショーごとに.each（）を実行してから、次のように、parentNodeを関連するリンクに渡します。

$('section.portfolioItem .image').each(function(){
    var p = this.parentNode;
    $(this).cycle({
      timeout:  0,
      prev:   $('.prev', p),
      next:   $('.next', p),
      pager:  $('.slideshowNav', p)
    });    
});
于 2010-05-17T22:00:36.297 に答える
3

コードをありがとう。同様のコードを見つけました、

 $('.minislideshow').each(function() {
    var $nav = $('<div class="pager"></div>').insertBefore(this);

    $(this).cycle({
        timeout: 2000,
        pager:   $nav
    });
 });

同じことをしているようです。私の問題は、最初のスライド以外のスライドの画像が表示されないことです。各divコンテナ内のスライドの数を表すポケットベルアイコンが表示されますが、画像を表示する方法がわかりません。彼らは最初のものでうまくいくようです。スライドショーに複数のdivを設定し、それぞれに一意のクラスを設定してから、クラスごとにJavaScriptを作成すると、探している結果を得ることができます。上記のコードが役に立ったので、インスタンスごとに新しいクラスを手動で作成する必要はありませんが、最初のコンテナの横にある他のコンテナのスライド画像は現在表示されていないようです。

于 2010-05-18T16:20:33.493 に答える