Question

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

Answer 1

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

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

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

Answer 2

你必须等待加载DOM

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

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

Answer 3

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

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

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

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

你可以使用这个：

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

或者这个：

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

Answer 4

不要使用

(function ($) {

改为使用

$(function() {

这是

的简写

$(document).ready(function() {

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

4 个答案: