Javascript在本地工作,不适用于webserver

时间:2013-12-03 15:14:38

标签: javascript php jquery html css

所以我有一个横幅,其中有八个链接在横幅上保持静止。当您单击一个时,背景应该向左或向右滑动以转到相应的图片。这一切都在我的本地机器上运行良好,但是当我将它上传到我的网络服务器时,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;
}

JS

(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
        );
    });
});

4 个答案:

答案 0 :(得分:4)

我不认为你的jQuery ready事件的语法(如果这是你的意图)是正确的。将JavaScript更改为以下内容可修复fiddle

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

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

答案 1 :(得分:1)

你必须等待加载DOM

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

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

答案 2 :(得分:1)

只是为了补充Nathan Harkenrider写的内容,你可能会混淆两个相似的东西。

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

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

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

你可以使用这个:

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

或者这个:

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

答案 3 :(得分:0)

不要使用

(function ($) {

改为使用

$(function() {

这是

的简写
$(document).ready(function() {