jQuery 2.2.4 和 3.6.0 版本重叠错误

发布于 2025-01-19 18:17:58 字数 3948 浏览 1 评论 0原文

我发现了我想集成到网站（我购买的模板）的代码，该代码仍在开发中。问题是该网站正在jQuery 3.6.0上运行，我想集成的此代码使用jQuery 2.2.4。

现在，当我将代码添加到网站上时，它可以正常运行，但另一方面，其他网站功能停止运行。当我检查控制台时，我会看到object.firewith和function.dready之类的错误，我对JavaScript不好。

您能帮我在最新的jQuery 3.6.0而不是2.2.4上运行此代码吗？

谢谢您的任何帮助。

$(window).on('load', function() {
  // Please run it with window.onload, not with document.ready
  initSmoothScrolling('.carouselblocks', 'smoothscroll');
});

function initSmoothScrolling(carouselblocks, carouselanimation) {
  /*
   * @param {String} container Class or ID of the animation container
   * @param {String} animation Name of the animation, e.g. smoothscroll
   */
  var sliderWidth = 0;
  var animationWidth = 0;
  var sliderHeight = $('>div>div:first-of-type', carouselblocks).outerHeight(false);

  $('>div>div', carouselblocks).each(function() {
    animationWidth += $(this).outerWidth(false);
  });

  // detect number of visible slides
  var slidesVisible = $(carouselblocks).width() / $('>div>div:first-of-type', carouselblocks).outerWidth(true);
  slidesVisible = Math.ceil(slidesVisible);

  // count slides to determine animation speed
  var slidesNumber = $('>div>div', carouselblocks).length;
  var speed = slidesNumber * 2;

  // append the tail    
  $('>div>div', carouselblocks).slice(0, slidesVisible).clone().appendTo($('>div', carouselblocks));

  // Detect the slider width with appended tail
  $('>div>div', carouselblocks).each(function() {
    sliderWidth += $(this).outerWidth(false);
  });

  // set slider dimensions
  $('>div', carouselblocks).css({
    'width': sliderWidth,
    'height': sliderHeight
  });

  // Insert styles to html
  $("<style type='text/css'>@keyframes " + carouselanimation + " { 0% { margin-left: 0px; } 100% { margin-left: -" + animationWidth + "px; } } " + $('>div>div:first-of-type', carouselblocks).selector + " { -webkit-animation: " + carouselanimation + " " + speed + "s linear infinite; -moz-animation: " + carouselanimation + " " + speed + "s linear infinite; -ms-animation: " + carouselanimation + " " + speed + "s linear infinite; -o-animation: " + carouselanimation + " " + speed + "s linear infinite; animation: " + carouselanimation + " " + speed + "s linear infinite; }</style>").appendTo("head");

  // restart the animation (e.g. for safari & ie)   
  var cl = $(carouselblocks).attr("class");
  $(carouselblocks).removeClass(cl).animate({
    'nothing': null
  }, 1, function() {
    $(this).addClass(cl);
  });
}

html,
body {
  margin: 0;
  padding: 0;
}

.carouselblocks {
  overflow: hidden;
  width: 100vw;
  margin: 50px auto;
}

.carouselanimation {
  width: auto;
  height: 100px;
  font-size: 0px;
}

.carouselanimation div {
  display: inline-block;
  width: auto;
  float: none;
  padding: 0 10px;
}

<body>
  <!-- partial:index.partial.html -->
  <div class="carouselblocks">
    <div class="carouselanimation">
      <div><img src="http://fpoimg.com/200x200?text=First"></div>
      <div><img src="http://fpoimg.com/200x200?text=Second"></div>
      <div><img src="http://fpoimg.com/200x200?text=Third"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <!-- cut -->
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <!-- script src="./script.js"></script -->
</body>

原文

I found this piece of code that I want to integrate to a website (a template that I purchased) which is still under development. The issue is that the website is running on jQuery 3.6.0, and this code that I want to integrate is using jQuery 2.2.4.

Now, when I add the code to the website, it works fine, but in the other hand, other website functions stops running. and when I check the console I see errors like Object.fireWith and Function.ready and I'm not good with JavaScript.

Can you help me make this piece of code run on the latest jQuery 3.6.0 instead of 2.2.4?

Thank you for any help.

$(window).on('load', function() {
  // Please run it with window.onload, not with document.ready
  initSmoothScrolling('.carouselblocks', 'smoothscroll');
});

function initSmoothScrolling(carouselblocks, carouselanimation) {
  /*
   * @param {String} container Class or ID of the animation container
   * @param {String} animation Name of the animation, e.g. smoothscroll
   */
  var sliderWidth = 0;
  var animationWidth = 0;
  var sliderHeight = $('>div>div:first-of-type', carouselblocks).outerHeight(false);

  $('>div>div', carouselblocks).each(function() {
    animationWidth += $(this).outerWidth(false);
  });

  // detect number of visible slides
  var slidesVisible = $(carouselblocks).width() / $('>div>div:first-of-type', carouselblocks).outerWidth(true);
  slidesVisible = Math.ceil(slidesVisible);

  // count slides to determine animation speed
  var slidesNumber = $('>div>div', carouselblocks).length;
  var speed = slidesNumber * 2;

  // append the tail    
  $('>div>div', carouselblocks).slice(0, slidesVisible).clone().appendTo($('>div', carouselblocks));

  // Detect the slider width with appended tail
  $('>div>div', carouselblocks).each(function() {
    sliderWidth += $(this).outerWidth(false);
  });

  // set slider dimensions
  $('>div', carouselblocks).css({
    'width': sliderWidth,
    'height': sliderHeight
  });

  // Insert styles to html
  $("<style type='text/css'>@keyframes " + carouselanimation + " { 0% { margin-left: 0px; } 100% { margin-left: -" + animationWidth + "px; } } " + $('>div>div:first-of-type', carouselblocks).selector + " { -webkit-animation: " + carouselanimation + " " + speed + "s linear infinite; -moz-animation: " + carouselanimation + " " + speed + "s linear infinite; -ms-animation: " + carouselanimation + " " + speed + "s linear infinite; -o-animation: " + carouselanimation + " " + speed + "s linear infinite; animation: " + carouselanimation + " " + speed + "s linear infinite; }</style>").appendTo("head");

  // restart the animation (e.g. for safari & ie)   
  var cl = $(carouselblocks).attr("class");
  $(carouselblocks).removeClass(cl).animate({
    'nothing': null
  }, 1, function() {
    $(this).addClass(cl);
  });
}

html,
body {
  margin: 0;
  padding: 0;
}

.carouselblocks {
  overflow: hidden;
  width: 100vw;
  margin: 50px auto;
}

.carouselanimation {
  width: auto;
  height: 100px;
  font-size: 0px;
}

.carouselanimation div {
  display: inline-block;
  width: auto;
  float: none;
  padding: 0 10px;
}

<body>
  <!-- partial:index.partial.html -->
  <div class="carouselblocks">
    <div class="carouselanimation">
      <div><img src="http://fpoimg.com/200x200?text=First"></div>
      <div><img src="http://fpoimg.com/200x200?text=Second"></div>
      <div><img src="http://fpoimg.com/200x200?text=Third"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <div><img src="http://fpoimg.com/200x200"></div>
      <!-- cut -->
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

  <!-- script src="./script.js"></script -->
</body>

分享到QQ

分享到微博