javascript - 动画卷轴有很多问题

标签 javascript jquery html css scroll

所以我已经尝试解决这个问题一段时间了,但似乎无法理解。

我使用由圆圈组成的导航(见下面的网站),当用户点击一个圆圈时,它会将他/她转到相应的幻灯片。

当你四处点击时,它有时会一直滑回到窗口的开头(margin-left = 0)。如果它一开始没有这样做,只需点击一两秒钟,您最终就会看到它。

http://dan.stargroupdev.com/

这是有问题的代码:

$("#footer-slidenav .links a").click(function () {
  // Get nav index
  var slidenum = $(this).attr("id").slice(3);
  // Setup slide selector with string to avoid issues
  var slidetext = ".slide:eq(" + slidenum + ")";
  slidenum = $(slidetext).offset().left;
  console.log("Top: " + slidenum);
  var offset2 = 0;
  // Find window offset to center slide if screen is bigger than 1000px (size of one slide)
  if (($(window).width() - 1000) / 2 > 0) {
    offset2 = ($(window).width() - 1000) / 2;
  }
  // Slide window to slide # that was clicked
  $("html:not(:animated), body:not(:animated)").animate({
    scrollLeft: slidenum
  }, 1000, function () {
    console.log("Middle: " + slidenum);
    // Callback to center slide and give a nice little animated touch
    slidenum = $(slidetext).offset().left;
    console.log("Bottom: " + slidenum);
    $("html:not(:animated), body:not(:animated)").animate({
      scrollLeft: (slidenum - offset2)
    }, "fast");
  });
  return false;
});

我尝试了 $("html:not(:animated), body:not(:animated)") 以及其他一些类似的可能解决方案,但错误仍然存​​在。

任何建议都会很棒,我非常乐意接受你们可能有的任何想法。

谢谢。

最佳答案

原来我在另一个 JS 文件中有一段剩余的代码。很抱歉浪费你们的时间,这就是它变得困惑的原因。

不过,我很感谢您的回答。

关于javascript - 动画卷轴有很多问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6712042/

相关文章:

javascript - 如何在点击 meteor 时显示图标?

javascript - 从服务获取变量到 Controller

javascript - Jasmine 测试中未调用 AngularJS 指令链接函数

javascript - 如何在 JS 中使这个数组键动态化

html - 为什么 border-radius 对图像不起作用?

javascript - 一页网站的平滑滚动

javascript - NodeJS 虚拟机用例

javascript - 根据滚动条的位置更新 div 文本(数字)

javascript - jQuery .prepend() 不工作

javascript - Bootstrap 可折叠表单——一次只有一个面板可用