|
Метки: очистка ручная отмена |
| Строка 1: |
Строка 1: |
| (function() {
| |
| var races = [
| |
| {name: 'Человек', img: 'Человек.png', link: 'Человек'},
| |
| {name: 'Унатх', img: 'Унатх.png', link: 'Унатх'},
| |
| {name: 'Дворф', img: 'Дворф.png', link: 'Дворф'},
| |
| {name: 'Диона', img: 'Диона.png', link: 'Диона'},
| |
| {name: 'Кидан', img: 'Кидан.png', link: 'Кидан'},
| |
| {name: 'Фелинид', img: 'Фелинид.png', link: 'Фелинид'},
| |
| {name: 'Родентия', img: 'Родения.png', link: 'Родентия'},
| |
| {name: 'Авали', img: 'Авали.png', link: 'Авали'},
| |
| {name: 'Вульпканин', img: 'Вульпанит.png', link: 'Вульпканин'},
| |
| {name: 'Арахнид', img: 'Арахнид.png', link: 'Арахнид'},
| |
| {name: 'Слаймолюд', img: 'Слаймолюд.png', link: 'Слаймолюд'},
| |
| {name: 'Ниан', img: 'Ниан.png', link: 'Ниан'},
| |
| {name: 'Вокс', img: 'Вокс.png', link: 'Вокс'}
| |
| ];
| |
|
| |
|
| var currentIndex = 0;
| |
|
| |
| var container = document.createElement('div');
| |
| container.className = 'race-carousel';
| |
|
| |
| // Центральная карточка с стрелками
| |
| var main = document.createElement('div');
| |
| main.className = 'race-main';
| |
|
| |
| var leftArrow = document.createElement('span');
| |
| leftArrow.className = 'arrow';
| |
| leftArrow.innerHTML = '◀';
| |
| main.appendChild(leftArrow);
| |
|
| |
| var largeCard = document.createElement('div');
| |
| largeCard.className = 'race-card-large';
| |
| main.appendChild(largeCard);
| |
|
| |
| var rightArrow = document.createElement('span');
| |
| rightArrow.className = 'arrow';
| |
| rightArrow.innerHTML = '▶';
| |
| main.appendChild(rightArrow);
| |
|
| |
| container.appendChild(main);
| |
|
| |
| // Мини-карточки
| |
| var miniContainer = document.createElement('div');
| |
| miniContainer.className = 'race-mini-container';
| |
|
| |
| for (var i = 0; i < races.length; i++) {
| |
| (function(index) {
| |
| var mini = document.createElement('div');
| |
| mini.className = 'race-mini';
| |
| mini.innerHTML =
| |
| '<a href="/wiki/' + races[index].link + '"><img src="/images/' + races[index].img + '" alt="' + races[index].name + '"></a>';
| |
| mini.onclick = function() {
| |
| currentIndex = index;
| |
| updateDisplay();
| |
| };
| |
| miniContainer.appendChild(mini);
| |
| })(i);
| |
| }
| |
|
| |
| container.appendChild(miniContainer);
| |
|
| |
| // Информация о расе
| |
| var infoDiv = document.createElement('div');
| |
| infoDiv.className = 'race-info';
| |
| container.appendChild(infoDiv);
| |
|
| |
| var target = document.querySelector('.race-display');
| |
| if (!target) target = document.body;
| |
| target.appendChild(container);
| |
|
| |
| function updateDisplay() {
| |
| var race = races[currentIndex];
| |
| largeCard.innerHTML =
| |
| '<a href="/wiki/' + race.link + '"><img src="/images/' + race.img + '" alt
| |
