Сообщение от YaroBest
|
спасибо за совет, выходит без JQuery ничего не выйдет?
|
Не слушай их. Разберись сначала с чистым js. Пиши под современные браузеры. Если нужно чтобы работало и в старье, но не хочешь разбираться в багах/различиях старых браузеров, тогда используй jquery.
Сообщение от YaroBest
|
не могу понять как так получается что один и тот же код в разных браузерах себя по-разному ведет (ну, почти )
|
Не совсем. Код себя одинаково ведет. Но в старых браузерах ущербная объектная модель документа. Вот ты юзаешь window.innerHeight. А в старых IE нет такого свойства.
У тя проблема не в этом. Во-первых, какого хрена ты напихал в код setInterval'ов? Их вообще не должно быть, это неправильный подход. Получается ты используешь что-то вроде "метода тыка". Еще ты почему-то боишься массивов. Вместо slides у тебя отдельно slide0, slide1 и т.д.
Почему ты меню выдвигаешь каждый пункт отдельно - неясно. Не проще ли задать -100% родителю?
Цитата:
|
автоматическое выравнивание слайдов (если застряли на пол экрана)
|
Это вообще порадовало. Это как вообще? Вот из-за твоих интервалов и появляется ненужная энтропия.
Изучай "классы". Вместо того чтобы раскидывать по всей страницы кучу переменных и функций для работы с ними, объединяй их по смыслу в группы - в объекты. Несколько свойств + методы для работы с ними. Допустим меню:
class Menu() {
constructor(selector) {
this.items = document.querySelector(selector).children;
this.active = -1;
this.setActive(0);
this.setupListeners();
}
setActive(index) {
this.active = index;
this.items[index].classList.add('active');
}
setupListeners() {
for (var i = 0; i < this.items; i++)
this.items[i].onclick = this.setActive.bind(this, i); // ES5, не работает в старье
}
}
var menu = new Menu('.menu');
menu.setActive(1);
Анимацию проще сделать на css3. В старье будет без анимации. Ну и че? Почти всегда старый браузер == старый комп == тормоза при анимации. Так что все справедливо.
Вот короче тебе заготовка:
http://jsfiddle.net/danya_postfactum/z8cLa59g/
Только событие wheel не кроссбразерное. Нужны костыли для событий DOMMouseScroll (FF старый), mousewheel (chrome старый, ie8).
Работает во всех нормальных браузерах, в IE10+. Только меню я побыстрому отцентрировал через css3. Подключи classList.js с просторов инета и заработает в IE9. Подключи addEventListener.js и почти что заработает в IE8, правда без анимации.