使用多个 JavaScript

working with multiple javascripts

本文关键字:JavaScript      更新时间:2023-09-26

我有一个带有一些javascript的项目。一个图像查看器,一个轮播,一些切换,现在我需要制作一个弹出表单。但是当我插入弹出窗口的 javascript 时......正在停止工作。我怎样才能使一切正常运转?或任何提示来帮助我创建一个弹出表单(而不是我现在使用的)。提前致谢

这是标题中的脚本

<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/fancybox/jquery.fancybox.css"> 
<link rel="stylesheet" href="css/bootstrap-lightbox.min.css">
<link rel="stylesheet" href="css/owl-carousel/owl.carousel.css">
<link rel="stylesheet" href="css/owl-carousel/owl.theme.css"> 
<script type="text/javascript">
    $( document ).ready(function() {
        $(".toggleControl").click(function(){ 
            $(this).siblings(".toggleDiv").slideToggle(1000);
            $(this).children().children( ".collapse-expand" ).toggleClass( "collapse-ico" );
            $(this).children().children( ".collapse-expand" ).toggleClass( "expand-ico" );
        });
    });     //document.ready end
</script>
<script src="js/popjs.js"></script>
<link rel="stylesheet" href="popupwindow.css">
<script src="popupwindow.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#newsletter').click(function (e) {
e.preventDefault();
$('#modal-content').popUpWindow({
action: "open", // open or close
modal: true, // modal mode
size: "large", // large, medium or large
buttons: [{
text: "x",
click: function () {
this.close();
}
}]
});
});
});
</script>

这是页脚中的脚本

<script src="js/jquery-2.0.1.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript"></script>
<script src="js/fancybox/jquery.mousewheel-3.0.6.pack.js" type="text/javascript"></script>
<script src="js/okzoom.js"></script>
<script src="js/owl.carousel.js"></script>
<script type="text/javascript">
    $( document ).ready(function() {
        $("#owl-example").owlCarousel({
            items : 4
        })
    });
</script>    
<script type="text/javascript">
      $(document).ready(function() {
          $('#pro-img-carousel').carousel({
            interval: 10000
          })
          $('#carousel-pro-img').carousel ({
              interval:8000
          })
        });
</script>   
    <script type="text/javascript">
      $(function(){
          $('.example').okzoom({
            width: 100,
            height: 100,
            border: "1px solid black",
            shadow: "0 0 5px #000"
          });
      });   
    </script>
<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox();
        $(".fancybox-effects-d").fancybox({
            padding: 0,
            openEffect : 'elastic',
            openSpeed  : 150,
            closeEffect : 'elastic',
            closeSpeed  : 150,
            closeClick : true,
            helpers : {
                overlay : null
            }
        });
    });
    </script> 
    <script>
    $(document).ready(function() {
    function random(owlSelector){
    owlSelector.children().sort(function(){
    return Math.round(Math.random()) - 0.5;
    }).each(function(){
    $(this).appendTo(owlSelector);
    });
    }
    $("#owl-demo").owlCarousel({ 
    navigation: true,
    navigationText: [
    "<img src='images/left.png' alt='' class=''>",
    "<img src='images/right.png' alt='' class=''>"
    ],
    beforeInit : function(elem){
    random(elem);
    }
    });
    });
  </script>

起初,你包含了 jquery 3 次,引导程序 2 次。一次就足够了。

既然你使用的是 Bootstrap,那么最好使用这个 http://getbootstrap.com/javascript/#modals