javascript - 如何在一个php文件中执行两个javascript？

Question

我在一个 php 文件中包含了两个 javascript。第一个是相机，第二个是 carouFredSel。但他们不一起跑。如果我删除第二个，那么第一个就可以正常工作。如果我保留两者，那么只有第二个运行。但我想运行这两个文件。请有人帮助我摆脱困境。

    <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>

Answer 1

您已添加jquery-1.8.2.min.js && jquery.min.js。两者相同，删除其中一个

编辑

执行以下步骤:

删除jquery-1.8.2.min.js

将 jquery.min.js 放在所有其他脚本的顶部

将所有 $( 替换为 jQuery(