У меня проблемы с многоклассовым выбором и петлей событий JavaScript [закрыто] ⇐ Javascript

[Anonymous]

Есть готовый слайд. Я попытался немного улучшить это. Коды на слайде должны повторяться 3 раза на одной странице. Но работает только первая часть. Две другие части не работают. И я не мог этого сделать. Я думаю, что это связано с селекторами JS. Я помириваю, чтобы интегрировать два кода шаблонов, но возникли некоторые проблемы. (Вертикальный скрипт в раскрывающемся меню 2 и 3 DOT не работает) < /p>

Код: Выделить всё

window.kontext = function(container) {

// Dispatched when the current layer changes
var changed = new kontext.Signal();

// All layers in this instance of kontext
var layers = Array.prototype.slice.call(container.querySelectorAll('.layer'));

// Flag if the browser is capable of handling our fancy transition
var capable = 'WebkitPerspective' in document.body.style ||
'MozPerspective' in document.body.style ||
'msPerspective' in document.body.style ||
'OPerspective' in document.body.style ||
'perspective' in document.body.style;

if (capable) {
container.classList.add('capable');
}

// Create dimmer elements to fade out preceding slides
layers.forEach(function(el, i) {
if (!el.querySelector('.dimmer')) el.innerHTML += '';
});

/**
* Transitions to and shows the target layer.
*
* @param target index of layer or layer DOM element
*/
function show(target, direction) {

// Make sure our listing of available layers is up to date
layers = Array.prototype.slice.call(container.querySelectorAll('.layer'));

// Flag to CSS that we're ready to animate transitions
container.classList.add('animate');

// Flag which direction
direction = direction || (target > getIndex() ? 'right' : 'left');

// Accept multiple types of targets
if (typeof target === 'string') target = parseInt(target);
if (typeof target !== 'number') target = getIndex(target);

// Enforce index bounds
target = Math.max(Math.min(target, layers.length), 0);

// Only navigate if were able to locate the target
if (layers[target] && !layers[target].classList.contains('show')) {

layers.forEach(function(el, i) {
el.classList.remove('left', 'right');
el.classList.add(direction);
if (el.classList.contains('show')) {
el.classList.remove('show');
el.classList.add('hide');
} else {
el.classList.remove('hide');
}
});

layers[target].classList.add('show');

changed.dispatch(layers[target], target);

}

}

/**
* Shows the previous layer.
*/
function prev() {

var index = getIndex() - 1;
show(index >= 0 ? index : layers.length + index, 'left');

}

/**
* Shows the next layer.
*/
function next() {

show((getIndex() + 1) % layers.length, 'right');

}

/**
* Retrieves the index of the current slide.
*
* @param of [optional] layer DOM element which index is
* to be returned
*/
function getIndex(of) {

var index = 0;

layers.forEach(function(layer, i) {
if ((of && of == layer) || (!of && layer.classList.contains('show'))) {
index = i;
return;
}
});

return index;

}

/**
* Retrieves the total number of layers.
*/
function getTotal() {

return layers.length;

}

// API
return {

show: show,
prev: prev,
next: next,

getIndex: getIndex,
getTotal: getTotal,

changed: changed

};

};

/**
* Minimal utility for dispatching signals (events).
*/
kontext.Signal = function() {
this.listeners = [];
}

kontext.Signal.prototype.add = function(callback) {
this.listeners.push(callback);
}

kontext.Signal.prototype.remove = function(callback) {
var i = this.listeners.indexOf(callback);

if (i >= 0) this.listeners.splice(i, 1);
}

kontext.Signal.prototype.dispatch = function() {
var args = Array.prototype.slice.call(arguments);
this.listeners.forEach(function(f, i) {
f.apply(null, args);
});
}

// Create a new instance of kontext
var k = kontext(document.querySelector('.kontext'));

// Demo page JS

var bulletsContainer = document.body.querySelector('.bullets');

// Create one bullet per layer
for (var i = 0, len = k.getTotal(); i < len;  i++) {
var bullet = document.createElement('li');
bullet.className = i === 0 ? 'active' : '';
bullet.setAttribute('index', i);
bullet.onclick = function(event) {
k.show(event.target.getAttribute('index'))
};
bullet.ontouchstart = function(event) {
k.show(event.target.getAttribute('index'))
};
bulletsContainer.appendChild(bullet);
}

// Update the bullets when the layer changes
k.changed.add(function(layer, index) {
var bullets = document.body.querySelectorAll('.bullets li');
for (var i = 0, len = bullets.length; i < len; i++) {
bullets[i].className = i === index ? 'active' : '';
}
});

document.addEventListener('keyup', function(event) {
if (event.keyCode === 37) k.prev();
if (event.keyCode === 39) k.next();
}, false);

const sliderContainer = document.querySelector('.slider-container');
const slideRight = document.querySelector('.right-slide');
const slideLeft = document.querySelector('.left-slide');
const upButton = document.querySelector('.up-button');
const downButton = document.querySelector('.down-button');
const slidesLength = slideRight.querySelectorAll('div').length;

console.log(slidesLength);
let activeSlideIndex = 0;

slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`

upButton.addEventListener('click', () => changeSlide('up'))
downButton.addEventListener('click', () => changeSlide('down'))

const changeSlide = (direction) => {
const sliderHeight = sliderContainer.clientHeight;
if (direction === 'up') {
activeSlideIndex++
if (activeSlideIndex > slidesLength - 1) {
activeSlideIndex = 0;
}
} else {
activeSlideIndex--
if (activeSlideIndex <  0) {
activeSlideIndex = slidesLength - 1;
}
}
slideRight.style.transform = `translateY(-${sliderHeight * activeSlideIndex}px)`
slideLeft.style.transform = `translateY(${sliderHeight * activeSlideIndex}px)`

}< /code>
.kontext {
width: 100%;
height: 100%;
}

.kontext .layer {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
/*box-shadow: 0px 0px 120px rgba( 0, 0, 0, 0.8 );*/
}

.kontext .layer.show {
visibility: visible;
}

.kontext.capable {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective: 1000px;

-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.kontext.capable .layer {
-webkit-transform: translateZ(-100px);
-moz-transform: translateZ(-100px);
transform: translateZ(-100px);
}

.kontext.capable .layer.show {
-webkit-transform: translateZ(0px);
-moz-transform: translateZ(0px);
transform: translateZ(0px);
}

.kontext.capable.animate .layer.show.right {
-webkit-animation: show-right 1s forwards ease;
-moz-animation: show-right 1s forwards ease;
animation: show-right 1s forwards ease;
}

.kontext.capable.animate .layer.hide.right {
-webkit-animation: hide-right 1s forwards ease;
-moz-animation: hide-right 1s forwards ease;
animation: hide-right 1s forwards ease;
}

.kontext.capable.animate .layer.show.left {
-webkit-animation: show-left 1s forwards ease;
-moz-animation: show-left 1s forwards ease;
animation: show-left 1s forwards ease;
}

.kontext.capable.animate .layer.hide.left {
-webkit-animation: hide-left 1s forwards ease;
-moz-animation: hide-left 1s forwards ease;
animation: hide-left 1s forwards ease;
}

/* CSS animation keyframes */

@-webkit-keyframes show-right {
0% {
-webkit-transform: translateZ(-200px);
}

40% {
-webkit-transform: translate(40%, 0) scale(0.8) rotateY(-20deg);
}

100% {
-webkit-transform: translateZ(0px);
}
}

@-webkit-keyframes hide-right {
0% {
-webkit-transform: translateZ(0px);
visibility: visible;
}

40% {
-webkit-transform: translate(-40%, 0) scale(0.8) rotateY(20deg);
}

100% {
-webkit-transform: translateZ(-200px);
visibility: hidden;
}
}

@-moz-keyframes show-right {
0% {
-moz-transform: translateZ(-200px);
}

40% {
-moz-transform: translate(40%, 0) scale(0.8) rotateY(-20deg);
}

100% {
-moz-transform: translateZ(0px);
}
}

@-moz-keyframes hide-right {
0% {
-moz-transform: translateZ(0px);
visibility: visible;
}

40% {
-moz-transform: translate(-40%, 0) scale(0.8) rotateY(20deg);
}

100% {
-moz-transform: translateZ(-200px);
visibility: hidden;
}
}

@keyframes show-right {
0% {
transform: translateZ(-200px);
}

40% {
transform: translate(40%, 0) scale(0.8) rotateY(-20deg);
}

100% {
transform: translateZ(0px);
}
}

@keyframes hide-right {
0% {
transform: translateZ(0px);
visibility: visible;
}

40% {
transform: translate(-40%, 0) scale(0.8) rotateY(20deg);
}

100% {
transform: translateZ(-200px);
visibility: hidden;
}
}

@-webkit-keyframes show-left {
0% {
-webkit-transform: translateZ(-200px);
}

40% {
-webkit-transform: translate(-40%, 0) scale(0.8) rotateY(20deg);
}

100% {
-webkit-transform: translateZ(0px);
}
}

@-webkit-keyframes hide-left {
0% {
-webkit-transform: translateZ(0px);
visibility: visible;
}

40% {
-webkit-transform: translate(40%, 0) scale(0.8) rotateY(-20deg);
}

100% {
-webkit-transform: translateZ(-200px);
visibility: hidden;
}
}

@-moz-keyframes show-left {
0% {
-moz-transform: translateZ(-200px);
}

40% {
-moz-transform: translate(-40%, 0) scale(0.8) rotateY(20deg);
}

100% {
-moz-transform:  translateZ(0px);
}
}

@-moz-keyframes hide-left {
0% {
-moz-transform: translateZ(0px);
visibility: visible;
}

40% {
-moz-transform: translate(40%, 0) scale(0.8) rotateY(-20deg);
}

100% {
-moz-transform: translateZ(-200px);
visibility: hidden;
}
}

@keyframes show-left {
0% {
transform: translateZ(-200px);
}

40% {
transform: translate(-40%, 0) scale(0.8) rotateY(20deg);
}

100% {
transform: translateZ(0px);
}
}

@keyframes hide-left {
0% {
transform: translateZ(0px);
visibility: visible;
}

40% {
transform: translate(40%, 0) scale(0.8) rotateY(-20deg);
}

100% {
transform: translateZ(-200px);
visibility: hidden;
}
}

/* Dimmer */

.kontext .layer .dimmer {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
visibility: hidden;
background: transparent;
}

.kontext.capable.animate .layer .dimmer {
-webkit-transition: background 1s ease;
-moz-transition: background 1s ease;
transition: background 1s ease;
}

.kontext.capable.animate .layer.hide .dimmer {
visibility: visible;
background: rgba(0, 0, 0, 0.7);
}

/* Styles for the demo */

html,
body {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
overflow: hidden;
background-color: #222;
background-repeat: repeat;
color: #fff;
}

.layer {
text-align: center;
text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.1);
}

.layer h2 {
position: relative;
top: 20%;
margin: 0;
font-size: 6.25em;
}

.layer.one {
background: #dc6c5f;
}

.layer.two {
background: #95dc84;
}

.layer.three {
background: #64b9d2;
}

.bullets {
position: absolute;
width: 100%;
bottom: 20px;
padding: 0;
margin: 0;
text-align: center;
}

.bullets li {
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin: 0 3px;

background: rgba(255, 255, 255, 0.5);
box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.bullets li:hover {
background: rgba(255, 255, 255, 0.8);
}

.bullets li.active {
cursor: default;
background: #fff;
}

@media screen and (max-width: 400px) {
body {
font-size: 12px;
}

.layer h2 {
font-size: 5em;
}

.bullets li {
margin: 0 6px;
}
}

/* PART TWO */

.slider-container {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}

.left-slide {
height: 100%;
width: 35%;
position: absolute;
top: 0;
left: 0;
transition: transform 0.5s ease-in-out;
}

.left-slide>div {
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
}

.left-slide h1 {
font-size: 40px;
margin-bottom: 10px;
margin-top: -30px;
}

.right-slide {
height: 100%;
position: absolute;
top: 0;
left: 35%;
width: 65%;
transition: transform 0.5s ease-in-out;
}

.right-slide>div {
background-repeat: no-repeat;
height: 100%;
width: 100%;
background-size: cover;
background-position: center center;
}

button {
background-color: white;
border: none;
color: #aaa;
cursor: pointer;
padding: 15px;
}

button:hover {
color: #222;
}

button:focus {
outline: none;
}

.slider-container .action-buttons button {
position: absolute;
left: 35%;
top: 50%;
z-index: 100;
}

.slider-container .action-buttons .down-button {
transform: translateX(-100%);
border-radius: 5px 0 0 5px;
}

.slider-container .action-buttons .up-button {
transform: translateY(-100%);
border-radius:  0 5px 5px 0;
}< /code>





Kontext
















left 1

left 2

left 3

left 4



right 1

right 2

right 3
right 4


[i][/i]
[i][/i]








left 1

left 2

left 3

left 4



right 1
right 2
right 3
right 4


[i][/i]
[i][/i]








left 1

left 2

left 3

left 4



right 1
right 2
right 3
right 4


[i][/i]
[i][/i]





[list][/list]

Я ищу ангела для пересмотра файла JS.

Подробнее здесь: https://stackoverflow.com/questions/794 ... event-loop