Вот сайт http://theescape.zone/
Слайды:
Булеты:
Свои ID получают правильно, если по ним тыкать - все хорошо, но...
При загрузке страницы начинается автослайд и когда он переходит на id="lt5"
и id="ln5"
, то не добавляет класс img5
к тегу <img class="head-image">
$(document).ready(function(){
$(window).on('scroll', function(){
if($(window).scrollTop()>0){
$('.header').addClass('affix');
} else {
$('.header').removeClass('affix');
}
});
$('#ln1').click(function(){
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln1').addClass("active");
$('#lt1').addClass("active");
$('.head-image').addClass("img1");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img5");
clearTimeout(timerId);
})
$('#ln2').click(function(){
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln2').addClass("active");
$('#lt2').addClass("active");
$('.head-image').addClass("img2");
$('.head-image').removeClass("img1");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img5");
clearTimeout(timerId);
})
$('#ln3').click(function(){
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln3').addClass("active");
$('#lt3').addClass("active");
$('.head-image').addClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img1");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img5");
clearTimeout(timerId);
})
$('#ln4').click(function(){
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln4').addClass("active");
$('#lt4').addClass("active");
$('.head-image').addClass("img4");
$('.head-image').removeClass("img1");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img5");
clearTimeout(timerId);
})
$('#ln5').click(function(){
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln5').addClass("active");
$('#lt5').addClass("active");
$('.head-image').addClass("img5");
$('.head-image').removeClass("img1");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img4");
clearTimeout(timerId);
})
var myElement1 = document.getElementsByClassName("head-image")[0];
var mc1 = new Hammer(myElement1);
mc1.get('pan').set({ direction: Hammer.DIRECTION_ALL });
// listen to events...
mc1.on("swipeleft", function(ev1) {
if ($('#ln5').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln1').addClass("active");
$('#lt1').addClass("active");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').addClass("img1");
clearTimeout(timerId);
return false;
}
if ($('#ln4').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln5').addClass("active");
$('#lt5').addClass("active");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img1");
$('.head-image').addClass("img5");
clearTimeout(timerId);
return false;
}
if ($('#ln3').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln4').addClass("active");
$('#lt4').addClass("active");
$('.head-image').addClass("img4");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img1");
clearTimeout(timerId);
return false;
}
if ($('#ln2').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln3').addClass("active");
$('#lt3').addClass("active");
$('.head-image').removeClass("img4");
$('.head-image').addClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img1");
clearTimeout(timerId);
return false;
}
if ($('#ln1').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln2').addClass("active");
$('#lt2').addClass("active");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img1");
$('.head-image').addClass("img2");
$('.head-image').removeClass("img3");
clearTimeout(timerId);
return false;
}
});
mc1.on("swiperight", function(ev1) {
if ($('#ln1').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln5').addClass("active");
$('#lt5').addClass("active");
$('.head-image').addClass("img5");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img1");
clearTimeout(timerId);
return false;
}
if ($('#ln2').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln1').addClass("active");
$('#lt1').addClass("active");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').addClass("img1");
clearTimeout(timerId);
return false;
}
if ($('#ln3').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln2').addClass("active");
$('#lt2').addClass("active");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img1");
$('.head-image').addClass("img2");
$('.head-image').removeClass("img3");
clearTimeout(timerId);
return false;
}
if ($('#ln4').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln3').addClass("active");
$('#lt3').addClass("active");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img4");
$('.head-image').addClass("img3");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img1");
clearTimeout(timerId);
return false;
}
if ($('#ln5').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln4').addClass("active");
$('#lt4').addClass("active");
$('.head-image').removeClass("img5");
$('.head-image').removeClass("img3");
$('.head-image').addClass("img4");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img1");
clearTimeout(timerId);
return false;
}
});
var timerId = setInterval(function() {
var $next = $('.block1 .active').removeClass('active').next()
if ($next.length) {
$next.addClass('active');
}
else {
$("#ln1").addClass('active');
}
if ($('#ln1').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln1').addClass("active");
$('#lt1').addClass("active");
$('.head-image').addClass("img1");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img5");
}
if ($('#ln2').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln2').addClass("active");
$('#lt2').addClass("active");
$('.head-image').removeClass("img1");
$('.head-image').addClass("img2");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img5");
}
if ($('#ln3').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln3').addClass("active");
$('#lt3').addClass("active");
$('.head-image').removeClass("img1");
$('.head-image').removeClass("img2");
$('.head-image').addClass("img3");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img5");
}
if ($('#ln4').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln4').addClass("active");
$('#lt4').addClass("active");
$('.head-image').removeClass("img1");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img5");
$('.head-image').addClass("img4");
}
if ($('#ln5').hasClass("active")) {
$('.line .text-head').removeClass("active");
$('.line a').removeClass("active");
$('#ln5').addClass("active");
$('#lt5').addClass("active");
$('.head-image').addClass("img5");
$('.head-image').removeClass("img2");
$('.head-image').removeClass("img3");
$('.head-image').removeClass("img4");
$('.head-image').removeClass("img1");
}
}, 5000);
});
После очень внимательных поисков была найдена опечатка в JS коде слайдера, но теперь появился еще 1 вопрос:
при загрузке нужно взять цифру из первого элемента булетов и передать значение в <img class="head-image img<--сюда-->">
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Хочу добавлять ключи в LocalStorage, если они там отсутствуютКак мне считывать - есть ли ключ с названием, например, "ключ" в LocalStorage?
Для различных библиотек JavaScript предумотрены Types Definitions что бы эти библиотеки можно было использовать в TypeScriptА если я хочу использовать пакет...