Question

我刚刚开始开发网站并面临一些问题。我试图在我的html中添加一个jquery插件，这是一个缩略图轮播栏。我的问题是没有调用jq函数。我尝试使用其他插件，但面临同样的问题。这是我的代码。感谢

<!DOCTYPE html>
<html>
<head>

<script src="/media/js/jquery-ui.min.js"></script>
<script src="/media/js/css3-mediaqueries.js"></script>
<script src="/media/js/fwslider.js"></script>
<script type="text/javascript" src="/media/js/jquery1.min.js"></script>
<script type="text/javascript"> // this junction is working
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event){     
                event.preventDefault();
                $('html,body').animate({scrollTop:$(this.hash).offset().top},1200);
            });
        });
    </script>
<script src="/media/js/jquery.easydropdown.js"></script> // this junction is working
<script type="text/javascript" src="/media/js/jquery.mixitup.min.js"></script>
<script type="text/javascript">
                $(function () {
                        hoverEffect: function () {
                            // code on animation which is working

                        }
                }); 
</script>

</head>
<body>
<!-- header-section-starts -->
<div class="header">
  <div class="top-header" ><!--to work on style="position:fixed; width:100%; top: 0px; z-  index:0;"-->
    <div class="container">
<!-- navbar code -->
<script><!--script-nav-->
     $("span.menu").click(function(){
     $(".top-menu ul").slideToggle("slow" , function(){
     });
     });
</script>
    </div>
  </div>

  <div id="fwslider">
    <div class="slider_container">
      <div class="slide"> 
        <img src="/media/images/banner.jpg" class="img-responsive" alt=""/>
      </div>
      <div class="slide"  id="Home">
        <img src="/media/images/banner1.jpg" class="img-responsive" alt=""/>
      </div>
    </div>
    <div class="timers"></div>
    <div class="slidePrev"><span></span></div>
    <div class="slideNext"><span></span></div>
  </div>
</div>
<!-- header-section-ends --> 
<!-- content-section-starts -->
<div class="content">
  <div class="container">
    <div class="about-section-left-grid">
      <section class="slider">
        <div class="flexslider">
          <ul class="slides">
            <li>
                <img src="/media/images/tiger1.jpg" class="img-responsive" alt="" />
            </li>
            <li>
                <img src="/media/images/pic2.jpg" class="img-responsive" alt="" />
            </li>
          </ul>
        </div>
      </section>
      <script defer src="/media/js/jquery.flexslider.js"></script>
      <script type="text/javascript"><!-- this works -->
                        $(function(){
                          SyntaxHighlighter.all();
                        });
                        $(window).load(function(){
                          $('.flexslider').flexslider({
                            animation: "slide",
                            start: function(slider){
                              $('body').removeClass('loading');
                            }
                          });
                        });
      </script>
    </div>
  </div>
  <!-- here my div block for thumbnail starts------------------------------------------------ -->
  <div class="container-fluid" style="padding:0;">
    <div id="custom_carousel" class="carousel slide" data-ride="carousel" data-interval="2500">
    <!-- Wrapper for slides -->
      <div class="controls">
        <ul class="nav">
          <li data-target="#custom_carousel" data-slide-to="0" class="active"><a href="#"><small>INDIVIDUAL LESSONS</small></a></li>
          <li data-target="#custom_carousel" data-slide-to="1"><a href="#"><small>PLAYER DEVELOPMENT PROGRAM</small></a></li>
        </ul>
      </div>
      <script><!--This fuction is not being called. its taken from a jq plugin for thumbnail carousel -->
                $(document).ready(function(){
                $('#custom_carousel').on('slide.bs.carousel', function (evt) {
                  $('#custom_carousel .controls li.active').removeClass('active');
                  $('#custom_carousel .controls li:eq('+$(evt.relatedTarget).index()+')').addClass('active');
                })
            });
      </script>
        <div class="carousel-inner">
          <div class="item active">
            <div class="container-fluid" style="background-color:#282B30;">
              <div class="row" >
                <div class="col-md-12">
                <article style="position: relative; width: 100%; opacity: 1;"> 
                <div class="col-md-4 clients-image">
                       <img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
                </div>
                <div class="col-md-8 clients-text">
                      <p>claritatem</p>
                </div>
                </article>
              </div>
            </div>
          </div>            
        </div> 
        <div class="item">
          <div class="container-fluid" style="background-color:#282B30;">
            <div class="row" >
              <div class="col-md-12">
              <article style="position: relative; width: 100%; opacity: 1;"> 
              <div class="col-md-4 clients-image">
                <img src="/media/images/beauty.jpg" class="img-responsive" alt="" />
              </div>
              <div class="col-md-8 clients-text">
                <p>claritatem</p>
              </div>
              </article>
            </div>
          </div>
        </div>            
      </div> 
    </div>
  </div><!-- End Carousel Inner -->
</div><!-- End Carousel -->
</div><!-- End content -->
</body>
</html>

为什么我的JQuery函数没有在bootstrap html模板中调用

0 个答案: