2014-01-27 27 views
0

我已經在一個php文件中包含了兩個javascripts。第一個是相機,第二個是carouFredSel。但他們不一起運行。如果我刪除第二個,那麼第一個正常工作。如果我保持雙方只有第二個運行。但我想運行這兩個文件。有人請幫我擺脫它。如何在一個php文件中執行兩個javascripts?

<script type='text/javascript' src='java_slider/scripts/jquery.min.js'></script> 
    <script type='text/javascript' src='java_slider/scripts/jquery.mobile.customized.min.js'></script> 
    <script type='text/javascript' src='java_slider/scripts/jquery.easing.1.3.js'></script> 
    <script type='text/javascript' src='java_slider/scripts/camera.min.js'></script> 

    <script> 
     jQuery(function(){ 

      jQuery('#camera_random').camera({ 
       thumbnails: true 
      }); 
     }); 
    </script> 




    <script language="JavaScript" type="text/JavaScript"> 
    <!-- 
    function MM_swapImgRestore() { //v3.0 
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
    } 
    function MM_preloadImages() { //v3.0 
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
    } 
    function MM_findObj(n, d) { //v4.01 
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
    if(!x && d.getElementById) x=d.getElementById(n); return x; 
    } 
    function MM_swapImage() { //v3.0 
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
    } 
    //--> 
    </script> 
     <!-- include jQuery + carouFredSel plugin --> 
     <script type="text/javascript" language="javascript" src="java/jquery-1.8.2.min.js"></script> 
     <script type="text/javascript" language="javascript" src="java/jquery.carouFredSel-6.2.1-packed.js"></script> 
     <!-- fire plugin onDocumentReady --> 
     <script type="text/javascript" language="javascript"> 
      $(function() { 

       // Basic carousel, no options 
       $('#foo0').carouFredSel(); 

       // Basic carousel + timer, using CSS-transitions 
       $('#foo1').carouFredSel({ 
        auto: { 
         pauseOnHover: 'resume', 
         progress: '#timer1' 
        } 
       }, { 
        transition: true 
       }); 

       // Scrolled by user interaction 
       $('#foo2').carouFredSel({ 
        auto: true, 
        prev: '#prev2', 
        next: '#next2', 
        pagination: "#pager2", 
        mousewheel: true, 
        swipe: { 
         onMouse: true, 
         onTouch: true 
        } 
       }); 

       // Variable number of visible items with variable sizes 
       $('#foo3').carouFredSel({ 
        width: 360, 
        height: 'auto', 
        prev: '#prev3', 
        next: '#next3', 
        auto: false 
       }); 

       // Responsive layout, resizing the items 
       $('#foo4').carouFredSel({ 
        responsive: true, 
        width: '100%', 
        scroll: 2, 
        items: { 
         width: 400, 
        // height: '30%', // optionally resize item-height 
         visible: { 
          min: 2, 
          max: 6 
         } 
        } 
       }); 

       // Fuild layout, centering the items 
       $('#foo5').carouFredSel({ 
        width: '100%', 
        scroll: 2 
       }); 
      }); 
     </script> 

     <style type="text/css" media="all"> 
      .wrapper { 
       background-color: #D1D1D1; 
       width: 670px; 
       box-shadow: 0 0 5px #999; 
       margin: auto; 
       height: 181px; 
      } 
      .list_carousel { 
       height: 100px; 
       width: 670px; 
       margin: auto; 
      } 
      .list_carousel ul { 
       list-style: none; 
       display: block; 
       padding-left: 0.5px; 
      } 
      #foo2{ 
       margin-left: 15px; 
       margin-top: -10px; 
      } 
      .list_carousel li { 
       font-size: 20px; 
       color: #999; 
       text-align: center; 
       background-color: #eee; 
       width: 194px; 
       height: 155px; 
       margin: 5px; 
       display: block; 
       float: left; 
       margin-left: 8px; 
      } 
      .list_carousel.responsive { 
       width: auto; 
       margin-left: 0; 
      } 
      .clearfix { 
       float: none; 
       clear: both; 
      } 
      .prev { 
       float: left; 
       margin-left: 2px; 
       margin-top: 80px; 
      } 
      .next { 
       float: right; 
       margin-right: 2px; 
       margin-top: 80px; 
      } 
      .pager { 
       float: left; 
       width: 300px; 
       text-align: center; 
      } 
      .pager a { 
       margin: 0 5px; 
       text-decoration: none; 
      } 
      .pager a.selected { 
       text-decoration: underline; 
      } 
      .timer { 
       background-color: #999; 
       height: 6px; 
       width: 0px; 
      } 
     </style> 
     <div class="wrapper">  
    <a id="prev2" class="prev" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/left_arrow_hover.png',1)"><img src="images/left_arrow.png" name="Image2" width="21" height="28" border="0"></a> 
<a id="next2" class="next" href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/right_arrow_hover.png',1)"><img src="images/right_arrow.png" name="Image4" width="21" height="28" border="0"></a> 
+0

我認爲你包含的不僅僅是2個javascripts。但看起來你包括jQuery兩次。 – putvande

+0

您應該將其降低爲約10-15行代碼的最小示例。它可以幫助你更好地理解問題,並且幫助你更容易。 – Deestan

回答

1

您已經添加jquery-1.8.2.min.js & & jquery.min.js。兩者都是相同的,刪除其中的一個

編輯

執行以下步驟:

刪除jquery-1.8.2.min.js

jquery.min.js上的所有其他腳本的頂部

全部更換$(jQuery(

+0

如果我刪除其中一個,則無法運行這兩個腳本。只有一個會工作。我需要執行這兩個。 – Jklyn

+0

@Jklyn不需要多少腳本你想運行。你只需要包含jQuery一次(除非有少數情況下有兩個腳本需要不兼容的jQuery版本,你需要查看noConflict)。 – Rhys

+0

那我爲什麼要面對這個問題呢?請告訴我接下來要做什麼? – Jklyn

相關問題