функция слайдера
народ помогите с функцией... никак не пойму как addEventListener связать с z-index
если можно с построчными коментами... заранее спс ! https://gist.github.com/archivisions...8ce81589646d3a
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
box-sizing: border-box;
}
.slider {
background-color: rgba(229, 255, 248, 0.28);
width: 500px;
height: 500px;
align-content: center;
position: relative;
border: 1px solid black;
}
#previewRed {
width: 300px;
height: 400px;
position: absolute;
background: red;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 1;
}
#previewYellow {
width: 300px;
height: 400px;
position: absolute;
background: #fffb1d;
padding: 10px;
border: 1px solid black;
z-index: 2;
}
#previewGreen {
width: 300px;
height: 400px;
position: absolute;
background: #5dc35e;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 3;
}
#previewBlue {
width: 300px;
height: 400px;
position: absolute;
background: #655bc3;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 4;
}
.contrl {
position: relative;
width: 100px;
height: 400px;
border: 1px solid rgba(70, 243, 19, 0.58);
margin-left: 350px;
}
#red {
position: absolute;
width: 75px;
height: 75px;
background: red;
border: 1px solid black;
margin: 10px;
color: white;
}
#yellow {
position: absolute;
width: 75px;
height: 75px;
background: #fffb1d;
border: 1px solid black;
margin: 10px;
top: 100px;
}
#green {
position: absolute;
width: 75px;
height: 75px;
background: #5dc35e;
border: 1px solid black;
margin: 10px;
color: white;
top: 200px;
}
#blue {
position: absolute;
width: 75px;
height: 75px;
background: #655bc3;
border: 1px solid black;
margin: 10px;
color: white;
top: 300px;
}
</style>
<body>
<div class="slider">
<div id="previewRed">Red</div>
<div id="previewYellow">Yellow</div>
<div id="previewGreen">Green</div>
<div id="previewBlue">Blue</div>
<div class="contrl">
<button id="red">Red</button>
<button id="yellow">Yellow</button>
<button id="green">Green</button>
<button id="blue">Blue</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
|
|
Спасибо, принцип похож, но всетаки хотелось бы с z-index-ом чтото... просто хочу разобратся с css+js...
|
3dartmax,
к сожалению, код по ссылке это то, что вам нужно :) :( |
делегирование , z-index
3dartmax,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
box-sizing: border-box;
}
.slider {
background-color: rgba(229, 255, 248, 0.28);
width: 500px;
height: 500px;
align-content: center;
display: flex;
justify-content: space-around;
padding: 15px;
border: 1px solid black;
}
.preview {
width: 300px;
height: 400px;
position: absolute;
padding: 10px;
border: 1px solid black;
text-align: center;
color: white;
z-index: 1;
opacity: .3;
transition: all .8s ease-in-out;
}
.contrl {
position: relative;
width: 100px;
height: 400px;
border: 1px solid rgba(70, 243, 19, 0.58);
margin-left: 350px;
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.btn.red, .preview.red {
background-color: red;
}
.btn.yellow, .preview.yellow {
background-color: #fffb1d;
}
.btn.green, .preview.green {
background-color: #5dc35e;
}
.btn.blue, .preview.blue {
background-color: #655bc3;
}
.btn{
width: 75px;
height: 75px;
border: 1px solid black;
margin: 10px;
color: white;
transition: all .3s ease-in-out;
}
.preview.act{
z-index: 10;
opacity: 1;
}
.btn.act {
border-radius: 12px;
border-width: thick;
}
:focus{
outline:0;
}
</style>
<script src="https://cdn.polyfill.io/v1/polyfill.js?Element.prototype.closest"></script>
<script>
window.addEventListener("DOMContentLoaded", function() {
var content = document.querySelector(".slider");
content.addEventListener("click", function(event) {
var target = event.target;
if (target = target.closest(".btn")) {
event.preventDefault();
var a = content.querySelectorAll(".btn");
var img = content.querySelectorAll(".preview");
var selected = [].indexOf.call(a, target);
[].forEach.call(a, function(el, i) {
(i == selected) ? (el.classList.add("act"), img[i].classList.add("act")):
(el.classList.remove("act"), img[i].classList.remove("act"))
})
}
})
});
</script>
<body>
<div class="slider">
<div class="preview red act">Red</div>
<div class="preview yellow">Yellow</div>
<div class="preview green">Green</div>
<div class="preview blue">Blue</div>
<div class="contrl">
<button class="btn red act">Red</button>
<button class="btn yellow">Yellow</button>
<button class="btn green">Green</button>
<button class="btn blue">Blue</button>
</div>
</div>
</body>
</html>
|
Спасибо! а можете объяснить строку с 93 по 100? вроде вербально понятно, но уловить пока все не могу...
|
3dartmax, "вербально" - устно? На web-форуме?)
Если кликнули по элементу с классом "btn" или у элемента есть родитель с этим классом (строка 93), то отменяем действие по умолчанию (94). Находим на на странице все элементы с классом "btn" (95) и "preview" (96). Ищем индекс элемента в массиве "а", на котором произошел клик (97). Обходим все элементы массива "а" в цикле (98). Если это элемент, по которому кликнули (99, до "?"), то добавляем элементам с классом "btn" и "preview" под индексом "i" класс "act" (99, после "?"), в противном случае удаляем класс "act" у названных ранее элементов (100). |
Спасибо огромное, бум грызть дальше!
|
Nexus,
У "вербально" значение не только устно, но и словесно. Так что в результате вы совершенно правильно, вполне вербально ответили. |
Dilettante_Pro, благодарю за разъяснение :)
|
| Часовой пояс GMT +3, время: 15:12. |