Javascript 如何使旋转木马和滚动动画在单个网页上协同工作

我有一个单独的网页，我使用滚动动画功能在这一部分之间移动

$(function() {

    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {

            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 2000);
                return false;
            }
        }
    });

});

这一切都很好，当我点击我的菜单，让我们说接触链接滚动动画做它的工作和smoothley带我接触部分。然后我为滑动图像添加旋转木马，这段代码

$(document).ready(function() {
  $('#media').carousel({
    pause: true,
    interval: false,
  });
});

但它不会工作，只要滚动功能是在我的js文件，当我删除滚动动画功能，我的旋转木马工作得很好。有没有办法让他们一起工作。任何帮助都将不胜感激

这是HTML

<div class="container">
  <div class="row">
    <h2>Media Slider Carousel BS3</h2>
  </div>
  <div class='row'>
    <div class='col-md-12'>
      <div class="carousel slide media-carousel" id="media">
        <div class="carousel-inner">
          <div class="item  active">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
                <p>sportska masaža</p>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>        
            </div>
          </div>
          <div class="item">
            <div class="row">
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>          
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>
              <div class="col-md-4">
                <a class="thumbnail" href="#"><img alt="" src="http://placehold.it/150x150"></a>
              </div>      
            </div>
          </div>
        </div>
        <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
        <a data-slide="next" href="#media" class="right carousel-control">›</a>
      </div>                          
    </div>
  </div>
</div> 

媒体滑块转盘BS3
马萨萨运动会

您必须写一个条件，即您的旋转木马链接不受滚动功能的影响：

if($(this).parents('#media').length == 0)

我们来看看,

$（函数（）{
$（'a[href*=#]：非（[href=#]）。单击（函数（e）{
if（$（this）.parents（'#media'）.length==0）{
if（location.pathname.replace（/^\/，''）==this.pathname.replace（/^\/，''）和&location.hostname==this.hostname）{
var target=$（this.hash）；
target=target.length？target:$（'[name='+this.hash.slice（1）+']'）；
if（目标长度）{
$（'html，body'）。设置动画({
scrollTop:target.offset（）.top
}, 2000);
返回false；
}
}
}
});
$（“#媒体”）.carousel({
停顿：是的，
间隔：假，
});
});

媒体滑块转盘BS3
马萨萨运动会

如果您有兴趣使用插件，您可以参考我以前从未使用过插件，请您解释一下我接下来需要做什么来解决我的问题，您使用的是哪个
旋转木马？你能创建一个工作演示吗？（使用编辑器中的
按钮）它可以工作，在这个条件下，你能解释一下它背后的逻辑吗，在这个例子中什么是条件测试，顺便说一句，tnx很多！！！：）此条件检查您单击的链接是否具有id为
media
的父元素，以及您是否仅在旋转木马中定义了media。所以，如果你有媒体作为父母，它将什么也做不了。如果没有此条件，您的旋转木马操作将被您的功能中断。