функция слайдера
народ помогите с функцией... никак не пойму как 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, время: 14:05. |