图库按钮未更新为与其相关联的当前图像？

Question

好的，我制作了一个画廊，除了一件事，它工作正常如果在播放动画时单击导航按钮，导航按钮将显示错误的突出显示按钮，直到图像发生变化这是问题的示例：

http://puu.sh/gQkuv/600e32fa0d.mp4 这是js代码和 JS fiddle:

  // gallery buttons
  $('.navi > img').click(function() {
    var sync = $(this).index();
    sync *= -galleryWidth;
    clearInterval(gallery);
    $('.pics > img').animate({'left': sync});
    $('.navi > img').removeClass('active');
    $('.navi > img:nth-of-type(' + ($(this).index() + 1) + ')').addClass('active');
    gallery = setInterval(autoplay(sync), 5000);
  });

  // gallery start loop
  var gallery = setInterval(autoplay(current), 5000);

http://jsfiddle.net/pa8pqnLw/2/

抱歉，这解释得不是很好，但是有人可以尝试指出问题并可能提供解决方案吗？提前谢谢你。

Answer 1

问题是你的自动播放会在动画结束后设置点，当你点击时，它会立即设置点，然后它会被自动播放的完整功能覆盖

您需要在点击时停止动画。我只通过添加 .stop()

在导航点击处理程序中编辑了这一行

$('.pics > img').stop().animate({'left': sync});

http://jsfiddle.net/pa8pqnLw/4/

更多信息在这里https://api.jquery.com/stop/

Description: Stop the currently-running animation on the matched elements.

图库按钮未更新为与其相关联的当前图像？

Gallery button not updating to current image it is meant to be associated with?

javascript

jquery

setinterval

image-gallery