Так что я знаю, что их было много, и я прошел столько, сколько мог.Javascript не загружается в документ HTML
он работает в JSFiddle, потому что скрипка автоматически выполняет загрузку для меня.
Я открываю свой html-скрипт на своем локальном диске в Chrome/IE/FireFox, к счастью, макет и цвета точны, но мой Javascript не загружается.
У меня есть правильная структура папок. Я проверил трижды.
Я записал свой .js-скрипт в конце моего html-документа непосредственно перед тегом.
Я попытался с помощью функции OnClick, чтобы открыть новое окно внутри HTML документа, и он работает
Пытались же OnClick функции из HTML документа Js документа, не работают. Я в недоумении.
Теперь я уверен, что это не имеет значения, но просто на самом деле это делает. Я использую Sublime Text 2 для моего кодирования.
Моя мышь превращается в руку, когда я наводил курсор на стрелку на веб-странице, поэтому кажется, что она обнаруживает стрелку в качестве кнопки/кнопки для клика, но слайд не изменяется на следующее изображение.
HTML:
<!doctype html>
<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet'>
<link href="warSupport.css" rel="stylesheet">
<link href="warMain.css" rel="stylesheet">
</head>
/Раздел HTML, что это будет влиять Javascript код/
<div class="slider-nav"> <a href="#" class="arrow-prev"><img src="./Images/Buttons/arrow-prev.png"></a>
<ul class="slider-dots">
<li class="dot active-dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
<li class="dot">•</li>
</ul> <a href="#" class="arrow-next"><img src="./Images/Buttons/arrow-next.png"></a>
</div>
/Конец Документ HTML/
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.1.min.js"></script>
<script src="warCode.js"></script>
</body>
</html>
Javascript Код
var main = function() {
$('.arrow-next').click(function() {
var curSlide = $('.active-slide');
var nexSlide = curSlide.next();
var currentDot = $('.active-dot');
var nextDot = currentDot.next();
if (nexSlide.length == 0) {
nexSlide = $('.slide').first();
};
if (nextDot.length == 0) {
nextDot = $('.dot').first();
}
curSlide.fadeOut(600).removeClass('active-slide');
nexSlide.fadeIn(600).addClass('active-slide');
currentDot.removeClass('active-dot');
nextDot.addClass('active-dot');
});
$('.arrow-prev').click(function() {
var curSlide = $('.active-slide');
var prevSlide = curSlide.prev();
var currentDot = $('.active-dot');
var prevDot = currentDot.prev();
if (prevSlide.length == 0) {
prevSlide = $('.slide').last();
}
if (prevDot.length == 0) {
prevDot = $('.dot').last();
}
curSlide.fadeOut(500).removeClass('active-slide');
prevSlide.fadeIn(500).addClass('active-slide');
currentDot.removeClass('active-dot');
prevDot.addClass('active-dot');
});
};
$(document).ready(main);
CSS код для Затронутой HTML Порции
/* Carousel */
.slider {
position: relative;
width: 100%;
height: 470px;
border-bottom: 1px solid #ddd;
}
.slide {
background: transparent url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/feature-gradient-transparent.png') center center no-repeat;
background-size: cover;
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.active-slide {
display: block;
}
.slide-copy h1 {
color: #363636;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin-top: 105px;
margin-bottom: 0px;
}
.slide-copy h2 {
color: #b7b7b7;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 40px;
margin: 5px;
}
.slide-copy p {
color: #959595;
font-family: Georgia, "Times New Roman", serif;
font-size: 1.15em;
line-height: 1.75em;
margin-bottom: 15px;
margin-top: 16px;
}
.slide-img {
text-align: center;
}
/* Slide feature */
.slide-feature {
text-align: center;
background-image: url('http://s3.amazonaws.com/codecademy-content/courses/ltp2/img/flipboard/ac.png');
height: 470px;
}
.slide-feature img {
margin-top: 112px;
margin-bottom: 28px;
}
.slide-feature a {
display: block;
color: #6fc5e0;
font-family:"HelveticaNeueMdCn", Helvetica, sans-serif;
font-family:'Oswald', sans-serif;
font-weight: 400;
font-size: 20px;
}
.slider-nav {
text-align: center;
margin-top: 20px;
}
.arrow-prev {
margin-right: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.arrow-next {
margin-left: 45px;
display: inline-block;
vertical-align: top;
margin-top: 9px;
}
.slider-dots {
list-style: none;
display: inline-block;
padding-left: 0;
margin-bottom: 0;
}
.slider-dots li {
color: #bbbcbc;
display: inline;
font-size: 30px;
margin-right: 5px;
}
.slider-dots li.active-dot {
color: #363636;
}
спасибо за ваше время.
Вы проверили какие-либо ошибки на консоли браузера? – Thangadurai
@Thangadurai wow смущающе сказать, нет, я не ... Я только что проверил в FireFox, первая ошибка появляется как «Reference Error: $ is not defined», которая говорит, что это является причиной этого «$ (document). готовый (основной);» Но я не понимаю, потому что, поскольку меня учили через codecademy, вот как его следует писать, а в конце документа .js – Umeed
там def, кажется, проблема с вашим jquery import-nothing is 404ing? вы попробовали просто ввести «$» в консоли js и посмотреть, что выводится? – stealthwang