Javascript在本地工作，不会在Web服务器上工作 - Javascript works locally, will not work on webserver

所以我有一个横幅，它有八个链接，这些链接在横幅上保持不变。当你点击其中一个时，背景应该向左或向右滑动以转到相应的图片。这一切在我的本地机器上都很好，但当我把它上传到我的Web服务器时，javascript似乎什么都不做。据我所知，它已经装满了。但是，当点击链接时，没有响应。

我应该注意，我正在将我创建的HTML移到PHP页面上，我听说PHP最初不与JS交互，但这不应该只影响HTML，对吧？

这是一个JSFiddle链接。

HTML

<div id='main-banner-space'>
    <div class="slider-wrapper">
        <div id="slide1" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide1 -->
        <div id="slide2" class="main-slide">
             <div id="slidetext">
                text
            </div>
        </div><!-- end of slide2 -->
        <div id="slide3" class="main-slide">
            <div id="slidetextb">
                text
            </div>
        </div><!-- end of slide3 -->
        <div id="slide4" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide4 -->
        <div id="slide5" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide5 -->
        <div id="slide6" class="main-slide">
            <div id="slidetextb">
                text
            </div>
        </div><!-- end of slide6 -->
        <div id="slide7" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide7 -->
        <div id="slide8" class="main-slide">
            <div id="slidetext">
                text
            </div>
        </div><!-- end of slide8 -->
    </div> <!-- end of slider-wrapper -->  
    <div id='menu'>
        <div id='link1'>link</div>
        <div id='link2'>link</div>
        <div id='link3'>link</div>
        <div id='link4'>link</div>
        <div id='link5'>link</div>
        <div id='link6'>link</div>
        <div id='link7'>link</div>
        <div id='link8'>link</div>
    </div>
</div><!--end of main-banner-space-->

CSS

a#banner { text-decoration:none; }
#main-banner-space {
    position:relative;
    overflow:hidden;
    width:930px;
    height:320px;
    top: 10px;
    left:-5px;
    border: 1px solid #dad8d8;
}
#menu {
    position:absolute;
    height:320px;
    width:260px;
    background-repeat:no-repeat;
    z-index:100;
    top:0px;
    left:-5px;
}
.slider-wrapper {
    position:relative;
    left:0;
    width:9000px;
    height:100%;
}
.main-slide {
    position:relative;
    width:930px;
    height:100%;
    float:left;
}
#slide1 {width:930px; background-image:url(../_Images/1.png);}
#slide2 {width:930px; background-image:url(../_Images/2.png);}
#slide3 {width:930px; background-image:url(../_Images/3.png);}
#slide4 {width:930px; background-image:url(../_Images/4.png);}
#slide5 {width:930px; background-image:url(../_Images/5.png);}
#slide6 {width:930px; background-image:url(../_Images/6.png);}
#slide7 {width:930px; background-image:url(../_Images/7.png);}
#slide8 {width:930px; background-image:url(../_Images/8.png);}
#link1 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link2 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link3 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link4 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link5 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link6 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link7 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link8 {height:40px; width:250px; background-image:url(../_Images/menuP.png);background-repeat:no-repeat;color:#000;line-height:250%;padding-left:10px;font-family:Arial;}
#link1:hover { cursor:pointer; background-position: 0 -40px; }
#link2:hover { cursor:pointer; background-position: 0 -40px; }
#link3:hover { cursor:pointer; background-position: 0 -40px; }
#link4:hover { cursor:pointer; background-position: 0 -40px; }
#link5:hover { cursor:pointer; background-position: 0 -40px; }
#link6:hover { cursor:pointer; background-position: 0 -40px; }
#link7:hover { cursor:pointer; background-position: 0 -40px; }
#link8:hover { cursor:pointer; background-position: 0 -40px; }
#slidetext {
    display:inline-block;
    position:relative;
    width:660px;
    left:270px;
    top:220px;
    font-size:16px;
    font-weight:bolder;
    font-style:italic;
}
#slidetextb {
    display:inline-block;
    position:relative;
    width:660px;
    left:270px;
    top:220px;
    font-size:15px;
    font-weight:bolder;
    font-style:italic;
}

(function ($) {
    // find all slides
    var slides = $('.main-slide');
    // starting index
    // click listener
    $('#link1').click(function(){
        // index
        i = 1;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(0).position().left)},
            800
        );
    });
    $('#link2').click(function(){
        // index
        i = 2;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(1).position().left)},
            800
        );
    });
    $('#link3').click(function(){
        //index
        i = 3;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(2).position().left)},
            800
        );
    });
    $('#link4').click(function(){
        // index
        i = 4;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(3).position().left)},
            800
        );
    });
    $('#link5').click(function(){
        //index
        i=5;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(4).position().left)},
            800
        );
    });
    $('#link6').click(function(){
        // index
        i=6;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(5).position().left)},
            800
        );
    });
    $('#link7').click(function(){
        // index
        i=7;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(6).position().left)},
            800
        );
    });
    $('#link8').click(function(){
        // index 
        i=8;
        // scroll to that index
        $('.slider-wrapper').animate(
            {'left' : -(slides.eq(7).position().left)},
            800
        );
    });
});

我认为jQuery就绪事件的语法（如果这是您的意图）是不正确的。将您的JavaScript更改为以下内容可以修复您的问题。

$(function() {
...
});

请参阅：http://api.jquery.com/ready/

您必须等待加载DOM

$(document).ready(function(){
        //Your Code goes here
});

http://jsfiddle.net/Fc4y7/2/

为了补充Nathan Harkenrider所写的内容，您可能混淆了两个看起来相似的东西。

1）这是一个立即调用的函数表达式，允许您为代码设置模块范围，并允许您从"外部"传入参数。在本例中，我们将jQuery作为$传递。

(function ($) {
  // code here
}(jQuery));

2）如前所述，第二个是jQuery的替代document.ready函数，它看起来相似但不同。

您可以使用以下任一选项：

$(document).ready(function () {
  // code here
});

或者这个：

$(function () {
  // code here
});

不要使用

(function ($) {

而是使用

$(function() {

这是的简写

$(document).ready(function() {