Question

我一直在努力让这个工作起来并且非常不成功。我是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功能。

REVISION：

我管理得到这个... ...

$(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");

任何人都可以帮忙......？

Answer 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")）时，您就会执行所谓的chaining。 jQuery方法是返回它们操作的jQuery对象的函数。但是某些方法（如.find()）实际上会更改返回的对象的基础元素。您可以将.css方法视为返回原始jQuery对象，将方法视为<{1}} 返回新的jQuery对象。当您查看jQuery文档时，请注意每个方法返回的内容。

对于更易读的代码，您可以避免链接，以便始终了解您正在操作的内容。像这样：

.find()

我知道如果你只是编写一小段代码而不关心内部代码就很难理解，但如果你对jQuery的工作有更多的了解，你就可以使用它快得多。

Answer 2

由于我无法得到任何帮助并且在成功中挣扎，我想我会发布结果以防其他人使用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");
        });

Jquery代码 - 几乎弄明白了

2 个答案: