OnClick/offclick? Таймер JS? Как заставить каждый из них работать многократно

66
5

Я новичок в JS и использую, поэтому я пытаюсь сделать этот слайдер изображения полезным для меня. Я хочу, чтобы сделать каждый снимок с помощью миниатюры, чтобы сделать изображение более крупным. Я смог сделать эту работу с эффектом наведения CSS, но мне нужно, чтобы он работал над кликом. Я получил его работу, но вы можете щелкнуть его только один раз. изображения не возвращаются в исходное состояние, как я могу это исправить? есть ли настройка таймера, чтобы он возвращался через 1 секунду? или он автоматически сбрасывается, когда вы нажимаете другой палец?

https://jsfiddle.net/Lumberjack225/t7r17r92/

HTML

<script>
function myFunction() {
document.getElementById("demo").style.top = "100px";
}
function myFunction2() {
document.getElementById("demo2").style.top = "100px";
}
function myFunction3() {
document.getElementById("demo3").style.top = "100px";
}
</script>

<!-- Mobile Slider -->
<div class="mobileslider">
<div class="innermobile">
<div class="container3">
<span onclick="myFunction()" href="#">
<img class="thumb" src="https://images.unsplash.com/photo-1460899960812-f6ee1ecaf117?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px">
<img id="demo" class="big2" src="https://images.unsplash.com/photo-1460899960812-f6ee1ecaf117?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px">
</span>

<span onclick="myFunction2()" href="#">
<img class="thumb" src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px">
<img id="demo2" class="big2" src="https://images.unsplash.com/photo-1460400355256-e87506dcec4f?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px">
</span>

<span onclick="myFunction3()" href="#">
<img class="thumb" src="https://images.unsplash.com/photo-1453230806017-56d81464b6c5?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="75px" height="75px">
<img id="demo3" class="big2" src="https://images.unsplash.com/photo-1453230806017-56d81464b6c5?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px">
</span>
<a href="#">
<center> <img class="big2 featuredm" src="https://images.unsplash.com/photo-1456318019777-ccdc4d5b2396?crop=entropy&fit=crop&fm=jpg&h=975&ixjsv=2.1.0&ixlib=rb-0.3.5&q=80&w=1400" width="300px"></center>
</a>
</div>
</div>
</div>

CSS

.container3 {
position: relative;
height: 297px;
width: 95%;
overflow: hidden;
margin-right: auto;
margin-left: auto;
margin-bottom: 0;
}

.container3 a {
float: left;
margin-top: 9px;
margin-right: 9px;
margin-left: 9px;
margin-bottom: 9px;
}

.container3 span {
float: left;
margin-top: 9px;
margin-right: 9px;
margin-left: 9px;
margin-bottom: 9px;
}
.container2 {
position: relative;
height: 660px;
width: 960px;
overflow: hidden;
margin: 0 auto;
}

.container2 a {
float: left;
margin: 20px;
}

.big {
position: absolute;
top: 260px;
left: 20px;
}

.big2 {
position: absolute;
top: 100px;
left: 0px;
}
.big {
position: absolute;
top: 900px;
left: 20px;

-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;
}
.big2 {
position: absolute;
top: 900px;
-webkit-transition: top .5s ease;
-moz-transition: top .5s ease;
-o-transition: top .5s ease;
-ms-transition: top .5s ease;
transition: top .5s ease;
margin-left: auto;
margin-right: auto;
}

.featured {
top: 260px;
left: 20px;
z-index: -3;
}

.featuredm {
top: 100px;
left: 0px;
z-index: -3;
}

a:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

a:hover .big {
top: 260px;
}

span:hover .thumb {
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}

.featured2 {
top: 260px;
left: 20px;
z-index: -3;
}

спросил(а) 2020-04-04T00:24:13+03:00 3 месяца назад
1
Решение
54

Чтобы сбросить позицию, мы никогда не меняем отдельную верхнюю позицию для изображений.big2. Вместо этого давайте создадим новый класс, который мы применяем к выбранному изображению.

CSS:

.selected {
top: 100px;
}

Всякий раз, когда мы щелкаем большим пальцем. Мы добавим или удалим этот класс из изображений.big2, чтобы перемещать их вверх и вниз. Затем добавим его к изображению, соответствующему щелчку большого пальца.

JavaScript:

Мы захватываем все элементы классом.thumb и храним их в массиве с большими пальцами, мы делаем то же самое с.big2 и сохраняем их в больших размерах.

var thumbs = document.querySelectorAll('.thumb');
var bigs = document.querySelectorAll('.big2');

Теперь у нас есть два списка с одинаковым порядком, например: большие пальцы [thumb0, thumb1, thumb2], bigs [big0, big1, big2]. Давайте добавим несколько кликов на наши большие пальцы. Мы прокручиваем список большого пальца. Для каждого элемента в списке добавляется прослушиватель событий щелчка. Внутри этой функции слушателя мы запускаем нашу функцию returnAll(), которая удаляет класс.selected из всех элементов в списке больших. Затем мы добавляем выбранный класс к большому в той же позиции в списке, что и большой палец, который мы только что нажали.

for (i = 0; i < thumbs.length; i++) {
(function(i) {
thumbs[i].addEventListener('click', function() {
returnAll();
bigs[i].classList.add("selected")
});
})(i);
}

function returnAll(){
for (i = 0; i < bigs.length; i++) {
bigs[i].classList.remove("selected");
}
}

Вот ваша скрипка, обновленная приведенным выше кодом: https://jsfiddle.net/t7r17r92/3/

Обратите внимание, что для ясности я переместил весь javascript в "файл".

Удачи!

ответил(а) 2020-04-04T00:35:03.093904+03:00 3 месяца назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема