Javascript работает локально, не будет работать на веб-сервере

Question

Javascript работает локально, не будет работать на веб-сервере

0

Поэтому у меня есть баннер, который содержит восемь ссылок, которые остаются статичными на баннере. Когда вы нажмете один, фон должен скользить влево или вправо, чтобы перейти к соответствующему изображению. Все это отлично работает на моей локальной машине, но когда я загружаю его на свой веб-сервер, 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
        );
    });
});

expenguin 03 дек. 2013, в 16:31

Источник

0

Где находится ваш javascript по отношению к html-файлу?
Kevin B 03 дек. 2013, в 15:16
0

Вы правильно включили свой JS-файл и jQuery?
Leonardo 03 дек. 2013, в 15:16
0

проверьте консоль браузера, чтобы увидеть, есть ли какие-либо ошибки
Arun P Johny 03 дек. 2013, в 15:17

Показать ещё 1 комментарий

Теги:

php

javascript

jquery

html

css

4 ответа

1

Вам нужно подождать, чтобы загрузить DOM

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

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

Meko Perez Estevez 03 дек. 2013, в 14:01

1

Чтобы добавить к тому, что написал Натан Харкенрайдер, возможно, вы запутали два похожих вида вещей.

1) Это мгновенное выражение функции, которое позволяет вам настроить область модуля для вашего кода, а также позволить вам передавать параметры из "снаружи". В этом примере мы передаем jQuery как $.

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

2) Вторая, как уже упоминалось, была jQuery альтернативная document.ready функция, которая выглядит аналогичной, но отличается.

Вы можете использовать либо следующее:

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

Или это:

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

Andy 03 дек. 2013, в 13:20

0

Не использовать

(function ($) {

вместо этого используйте

$(function() {

который является сокращением для

$(document).ready(function() {

ins0 03 дек. 2013, в 12:56

Ещё вопросы

Где находится ваш javascript по отношению к html-файлу?
Вы правильно включили свой JS-файл и jQuery?
проверьте консоль браузера, чтобы увидеть, есть ли какие-либо ошибки

Nathan Harkenrider · Accepted Answer · 2013-12-03T13-33-00.000Z

Я не думаю, что ваш синтаксис для события jQuery ready (если это ваше намерение) является правильным. Изменение вашего JavaScript на следующие исправления вашей скрипки.

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

См. Http://api.jquery.com/ready/

Чтобы расширить это объяснение немного больше. Используя функцию знака доллара в этом посте, он сообщает Javascript, когда вы начинаете выполнять свою самозапускающуюся функцию. Это связывает его с событием domready, поэтому оно начинает выполняться, когда dom загружен.