0

私はこれを機能させるために一日中努力してきましたが、非常に失敗しました。私はjqueryを初めて使用し、jquery関数を組み合わせるのに役立つ可能性があります。

スライドショーに次のコードを使用しています。

$(function() {
    $("#foo3").carouFredSel({
        items: 1,
        prev: {
            button: "#foo3_prev",
            key: "left"
        },
        next: {
            button: "#foo3_next",
            key: "right"
        },
        auto: {
            duration: 1000
        },
        scroll: {
            items: 1,
            duration: 1000,
            mousewheel: true,
            wipe: true,
            pauseOnHover: true,
            onAfter: function() {
              if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
              $(this).trigger( "pause" );
            }
        }
    },
  })
  .parent()
  .css("margin", "auto");       
});

そして、次の関数をそれにマージしようとして失敗しました：

 $("#foo3").carouFredSel({
auto    : false,
scroll  : {
    duration : 0.5
}
}).find("li").click(function() {
var deviation = parseInt( $("#foo3_deviation").val() );
$("#foo3").trigger("slideTo", [$(this), deviation]);
}).css("cursor", "pointer");

最初のコードセットの設定を維持する必要がありますが、スライドショー（li）をクリックして次の画像に進む機能を追加します。

さらに詳しい情報が必要かどうかはわかりませんが、必要な場合はお知らせください。

どうぞよろしくお願いいたします。

明確にするために：

.find（li）.click（function（）で始まるコードの最後のビットを追加する必要があります

コードの最初のセクションに移動して、既存のスライドショーhttp://2938.sandbox.i3dthemes.net/index.htmlを機能させ、画像をクリックして自動スクロールします。

リビジョン：

私はこの遠いものを手に入れるために管理しました...

$(function() {

        $("#foo3").carouFredSel({
            auto    : true,
            scroll  : {
            items: 1,
                duration: 1000,
                mousewheel: true,
                wipe: true,
                pauseOnHover: true,
               onAfter: function() {
            if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
              $(this).trigger( "pause" );
             }
          }},
            }).find("li").click(function() {
            var deviation = parseInt( $("#foo3_deviation").val() );
            $("#foo3").trigger("slideTo", [$(this), deviation]);
            }).css("cursor", "pointer");
          });

そして今、コードの最初の部分からこのスニペットを取り戻す方法を理解する必要があります...

    }).parent()
    .css("margin", "auto");

誰か助けてもらえますか...？

4

2 に答える 2

1

これを試して：

$(function() {

  $("#foo3").carouFredSel({
    auto    : true,
    scroll  : {
      items       : 1,
      duration    : 1000,
      mousewheel  : true,
      wipe        : true,
      pauseOnHover: true,
      onAfter     : function() {
        if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
          $(this).trigger( "pause" );
        }
      }
    }
  })
  .find("li")
  .click(function() {
    var deviation = parseInt( $("#foo3_deviation").val() );
    $("#foo3").trigger("slideTo", [$(this), deviation]);
  })
  .css("cursor", "pointer")
  .end()
  .parent()
  .css('margin','auto');

});

.css("cursor","pointer")前のメソッドが完了した直後に別のメソッド（たとえば）を実行するたびに、チェーンと呼ばれるものを実行します。jQueryメソッドは、操作したjQueryオブジェクトを返す関数です。ただし、などの一部のメソッドは、.find()返されるオブジェクトの基になる要素を実際に変更します。元のjQueryオブジェクト.cssを返すようなメソッドと、新しいjQueryオブジェクトを返すようなメソッドを考えることができます。jQueryのドキュメントを調べているときは、各メソッドが何を返すかを確認してください。.find()

より読みやすいコードの場合は、連鎖を回避できるため、操作内容を常に把握できます。このような：

$(function() {

  var $carousel = $('#foo3'); // caching the initial jQuery object in a variable.

  $carousel.carouFredSel({
    auto    : true,
    scroll  : {
      items       : 1,
      duration    : 1000,
      mousewheel  : true,
      wipe        : true,
      pauseOnHover: true,
      onAfter     : function() {
        if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
          $(this).trigger( "pause" );
        }
      }
    }
  });

  // change the css of the carousel's parent.
  $carousel.parent().css('margin','auto');

  // modify each <li> child of the carousel.
  $carousel.find("li")
    .click(function() {
      var deviation = parseInt( $("#foo3_deviation").val() );
      $("#foo3").trigger("slideTo", [$(this), deviation]);
    })
    .css("cursor", "pointer");

});

ほんの少しのコードを書いているだけで、内部を気にしない場合、これを理解するのは難しいことを私は知っていますが、jQueryが何をしているのかをもっと知っていれば、それをたくさん扱うことができますもっと早く。

于 2012-04-19T15:30:40.867 に答える
0

私は助けを得ることができず、これを成功させるのに苦労したので、caroufredselを使用している他の誰かが同じ効果を達成するのに助けが必要な場合に備えて結果を投稿すると思いました。

完成したコードは次のとおりです。

        $(function() {

        $("#foo3").carouFredSel({
            auto    : true,
            scroll  : {
            items: 1,
                duration: 1000,
                mousewheel: true,
                wipe: true,
                pauseOnHover: true,
               onAfter: function() {
            if ( $(this).triggerHandler( "currentPosition" ) == 0 ) {
              $(this).trigger( "pause" );
             }
          }},
            }).find("li").click(function() {
            var deviation = parseInt( $("#foo3_deviation").val() );
            $("#foo3").trigger("slideTo", [$(this), deviation]);
            }).css("cursor", "pointer");
            $("#foo3").parent().css("margin", "auto");
        });
于 2012-04-19T15:27:29.803 に答える