0

我已经为网站建立了主页，并且我的类别滑块工作正常，一旦我在 wordpress 中建立了网站并添加了一个分层滑块插件，我的类别滑块就停止工作了。

这是网站http://www.fiestapaints.co.uk/new/

我认为这是这两个 jquery 之间的冲突，但我无法更改图层滑块（第一个 jquery 代码），因为它是一个相当复杂的插件..

如果有人可以帮助我，那就太好了，提前谢谢你

<script pagespeed_orig_type="text/javascript" type="text/psajs" orig_index="9">
jQuery(document).ready(function () {
      jQuery("#layerslider_1").layerSlider({
          width: '940px',
          height: '395px',
          responsive: false,
          responsiveUnder: 0,
          sublayerContainer: 0,
          autoStart: true,
          pauseOnHover: false,
          firstLayer: 1,
          animateFirstLayer: false,
          randomSlideshow: false,
          twoWaySlideshow: true,
          loops: 0,
          forceLoopNum: true,
          autoPlayVideos: true,
          autoPauseSlideshow: 'auto',
          youtubePreview: 'maxresdefault.jpg',
          keybNav: true,
          touchNav: true,
          skin: 'minimal',
          skinsPath: 'http://www.fiestapaints.co.uk/new/wp-content/plugins/LayerSlider/skins/',
          globalBGColor: 'transparent',
          navPrevNext: true,
          navStartStop: true,
          navButtons: true,
          hoverPrevNext: true,
          hoverBottomNav: false,
          thumbnailNavigation: 'hover',
          tnWidth: 100,
          tnHeight: 60,
          tnContainerWidth: '60%',
          tnActiveOpacity: 35,
          tnInactiveOpacity: 100,
          imgPreload: true,
          yourLogo: false,
          yourLogoStyle: 'left: 10px; top: 10px;',
          yourLogoLink: false,
          yourLogoTarget: '_self',
          cbInit: function (element) {},
          cbStart: function (data) {},
          cbStop: function (data) {},
          cbPause: function (data) {},
          cbAnimStart: function (data) {},
          cbAnimStop: function (data) {},
          cbPrev: function (data) {},
          cbNext: function (data) {}
      });
});
</script>

和

<script pagespeed_orig_type="text/javascript" type="text/psajs" orig_index="3">
  jQuery(document).ready(function () {
      jQuery('#mycarousel').
      jcarousel({
          auto: 2,
          wrap: 'last',
          initCallback: mycarousel_initCallback
      });
  });

  function mycarousel_initCallback(carousel) {
      carousel.buttonNext.bind('click', function () {
          carousel.startAuto(0);
      });
      carousel.buttonPrev.
      bind('click', function () {
          carousel.startAuto(0);
      });
      carousel.clip.hover(function () {
              carousel.stopAuto();
          },
          function () {
              carousel.startAuto();
          });
  };
</script>
4

1 回答 1

0

pagespeed type=text/psajs pagespeed 将通过创建 onload 事件来推迟这些 javascript。但是，onload 在 document.ready 之后触发...

所以你的代码的操作顺序是......

document.ready 触发

onload 触发运行你的脚本并连接到 document.ready

document ready 已经触发，所以对 ready 的调用将立即执行

所以在加载期间

  1. 调用layerslider函数
  2. 调用 jcarousel 函数，该函数试图指向未定义的回调
  3. 定义了 initcallback

在调用 jquery ready jcarousel 之前，您需要在 onload 期间定义 initcallback 和任何其他回调或服务函数

<script pagespeed_orig_type="text/javascript" type="text/psajs" orig_index="3">
  function mycarousel_initCallback(carousel) {
    carousel.buttonNext.bind('click', function () {
      carousel.startAuto(0);
    });
    carousel.buttonPrev.
    bind('click', function () {
      carousel.startAuto(0);
    });
    carousel.clip.hover(function () {
          carousel.stopAuto();
    },
    function () {
        carousel.startAuto();
    });
  };

  jQuery(document).ready(function () {
    jQuery('#mycarousel').
    jcarousel({
      auto: 2,
      wrap: 'last',
      initCallback: mycarousel_initCallback
    });
  });

</script>

此外，在这段代码的上下文中，jquery 就绪是完全多余的。您可以删除它并拨打电话。

于 2014-03-19T23:27:37.160 回答