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()，实际上会改变返回对象的底层元素。您可以将方法.css视为返回原始 jQuery 对象，将方法.find()视为返回新的 jQuery 对象。当您浏览 jQuery 文档时，请注意每个方法的返回值。

对于更具可读性的代码，您可以避免链接，因此您始终知道自己在操作什么。像这样：

$(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 回答