Помогите пожалуйста написать правильный скрипт
Добрый день!
Мой вопрос вот в чём, как мне отследить 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, время: 14:27. |