Помогите пожалуйста написать правильный скрипт
Добрый день!
Мой вопрос вот в чём, как мне отследить checked в элементах input type="radio" и если input checked, задать его label класс. |
Merl,
А где неправильный? Что не получается? |
Есть такой слайдер.
Если коротко, работает он так, всем слайдам задаётся position: absolute, тем самым складываем их в одну стопку, и задаём opacity: 0; , делая их прозрачными(невидимыми). Далее задаю правило input[type="radio"]:checked + img{opacity: 1;}, тоесть, когда input выделен, стоящий за ним img становиться видимым. Input активируем нажатием на label , связаный с ним через id. Так же есть две кнопки, вперёд и назад, для них я прописал js, в котором меняют значение checked у inputю Но мне нужна рамка для выделеного label, прописал тоже через js, и теперь когда нажимаем на label иму присваивается класс border и одновременно удаляет этот класс у других label. Через перебор кнопками тоже добавляеться класс border, ниже представлен код js. И здесь появилась проблема, так как присвоение class="border" я выполняю двумя разными способами, когда я нажимаю на третий label, и тем самым выделяю его, а потом жму на кнопку вперёд, у меня появляется два элемента с классом border. Извините, если уже успел заморочить голову) Я хочу определить какой из input checked и задать элементу label, который связан с ним по id класс. Такое возможно? его Html: <div class="slider_wrap"> <div class="slider_control"> <div class="prev"> </div> <label for="sld1" class="border"></label> <label for="sld2" ></label> <label for="sld3"></label> <label for="sld4"></label> <div class="next"> </div> </div> <!-- slider_control --> <div class="fotos"> <input type="radio" name="slider" id="sld1" class="input" checked> <img src="images/slide1.jpg" alt="foto" > <input type="radio" name="slider" id="sld2" class="input"> <img src="images/1300696623_zara-colordresses_2011.jpg" alt="foto"> <input type="radio" name="slider" id="sld3" class="input"> <img src="images/41604028.36c0xb1atp.png" alt="foto"> <input type="radio" name="slider" id="sld4" class="input"> <img src="images/platje-v-goroshek-05.jpg" alt="foto"> </div> <!-- foto --> </div> <!-- slider_wrap --> его css: .slider_wrap{ width: 47%; max-width: 511px; display: -webkit-flex; display: -moz-flex; display: -ms-flex; display: -o-flex; display: flex; } .fotos{ width: 78%; padding-bottom: 125%; position: relative; margin-left: auto; input[type="radio"]{ display: none; } input[type="radio"]:checked + img{ opacity: 1; } } .fotos img{ position: absolute; top: 0; left: 0; opacity:0; transition: opacity 1.25s; } .slider_control { width: 14.3%; label{ display: block; width: 73px; height: 98px; background-size: cover; background-repeat: no-repeat; &:first-of-type{ background-image: url(../images/1.jpg); } &:nth-of-type(2){ background-image: url(../images/2.jpg); } &:nth-of-type(3){ background-image: url(../images/3.jpg); } &:last-of-type{ background-image: url(../images/4.jpg); } } /* label */ } .border{ outline: 2px solid @orange; } .prev{ .arrow(5%, 49%, 2%, 17%, 45deg); margin: 0 auto 15px; } .next{ .arrow(5%, 49%, 10%, 17%, -135deg); margin: 15px auto 0; } Но мне необходимы ещё кнопки вперёд и назад, здесь уже действовал через javascript: var btn_prev = document.querySelector('.slider_wrap .slider_control .prev'); var btn_next = document.querySelector('.slider_wrap .slider_control .next'); var i = 0; btn_prev.onclick = function(){ input[i].checked = ' '; // убираем checked у предыдущего i--; if(i < 0){ i = input.length - 1; } // условие, чтобы слайды шли по кругу input[i].checked = true; //ставим checked следующему } btn_next.onclick = function(){ input[i].checked = ' '; // убираем checked у предыдущего i++; if(i >= input.length){ i = 0; } // условие, чтобы слайды шли по кругу input[i].checked = true; //ставим checked следующему } И здесь всё работает. Но, для полного счастья, мне необходимо добавить рамку активному элементу Label. Я прописал стиль .border и сделал следующим образом: var labels = document.querySelectorAll('.slider_control label'); // выбираем все label function activeBorder() { for(var i = 0; i < labels.length; i++){ labels[i].classList.remove('border'); } // удаляю стиль .border установленый до этого this.classList.toggle('border'); // присваиваю элементу по которому нажали } // далее запускаю функцию for(var j = 0; j < labels.length; j++){ labels[j].onclick = activeBorder; } Но вот как сделать добавление рамок при переборе слайдов кнопками вперёд и назад??? Я переделал немножко script переключения слайдов кнопкой и теперь он выглядит так: btn_prev.onclick = function(){ input[i].checked = ' '; // убираем checked у предыдущего labels[i].classList.remove('border'); // убираем border у предыдущего i--; if(i < 0){ i = input.length - 1; }// условие, чтобы слайды шли по кругу input[i].checked = true; //ставим checked следующему labels[i].classList.add('border'); //ставим border следующему } |
Merl,
а можно сделать полный макет, рабочий без js? |
Нет, js нужен для работы кнопок "следующий слайд" и "предыдущий слайд". Или я не так понял Ваш вопрос?
Наверное легче будет переделать структуру html и использовать css свойство "~". |
Merl,
сделайте html и css с тестовыми картинками, так интереснее писать js (в 100500 раз). :) |
Merl,
:-? |
Понял, сейчас сделаю)
|
Сделал. Скачать можно по ссылке https://github.com/MerlKori/slider
|
Простейший слайдер с превью
Merl, вот так хотелось изначально ... :) макет html и css, ссылки на реальные картинки, только без блока js.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>slider</title> <style type="text/css"> body{ width: 100%; margin: 0; padding: 0; } .slider_wrap{ width: 80%; max-width: 960px; margin: 0 auto; } .slides{ position: relative; padding-top: 360px; } .slides img{ position: absolute; top: 0; left: 0; opacity:0; transition: opacity 1.25s; } .slides input[type="radio"]{ display: none; } .slides input[type="radio"]:checked + img{ opacity: 1; } .slider_control{ width: 100%; margin-top: 15px; text-align: center; } .slider_control label{ display: inline-block; width: 100px; height: 100px; background-size: cover; background-repeat: no-repeat; margin: 10px ; } .slider_control label:first-of-type{ background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage4.jpg); } .slider_control label:nth-of-type(2){ background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage6.jpg); } .slider_control label:last-of-type{ background-image: url(https://github.com/MerlKori/slider/raw/master/images/fullimage7.jpg); } .prev, .next{ display: inline-block; padding: 5px 10px; background: #000; color: #fff; vertical-align: middle; cursor: pointer; } .prev:active, .next:active{ background: #666; } .border{ outline: 2px solid green; } </style> <script> window.addEventListener("DOMContentLoaded", function() { [].forEach.call(document.querySelectorAll(".slider_wrap"), function(item) { var btn_prev = item.querySelector(".prev"); var btn_next = item.querySelector(".next"); var labels = item.querySelectorAll("label"); var len = labels.length - 1; var i = 0; function cleanout() { labels[i].classList.remove("border") } function addcls() { labels[i].classList.add("border") } function limit() { i < 0 && (i = len); i > len && (i = 0) } btn_prev.addEventListener("click", function() { cleanout(); i--; limit(); labels[i].click(); }); btn_next.addEventListener("click", function() { cleanout(); i++; limit(); labels[i].click(); }); [].forEach.call(labels, function(label, k) { label.addEventListener("click", function() { cleanout(); i = k; addcls() }) }) }) }); </script> </head> <body> <div class="slider_wrap"> <div class="slides"> <input type="radio" name="slide" id="slide1" checked> <img src="https://github.com/MerlKori/slider/raw/master/images/fullimage4.jpg" alt="foto"> <input type="radio" name="slide" id="slide2"> <img src="https://github.com/MerlKori/slider/raw/master/images/fullimage6.jpg" alt="foto"> <input type="radio" name="slide" id="slide3"> <img src="https://github.com/MerlKori/slider/raw/master/images/fullimage7.jpg" alt="foto"> </div> <div class="slider_control"> <div class="prev">предыдущий</div> <label for="slide1" class="border"></label> <label for="slide2"></label> <label for="slide3"></label> <div class="next">следующий</div> </div> </div> </body> </html> |
Часовой пояс GMT +3, время: 01:55. |