Что не так с моим слайдером?
98
11 марта 2021, 09:10
Немного освоившись в JS'e и jQuery, попробовал написать свой слайдер.
$(document).ready(function(){
$(".gallery-dot:nth-child(1)").css("background-color", "#1a1a1a");
$(window).on("resize load",function(){
if ($(window).width() <= 767){
$(".gallery-current-image").css("object-fit","contain");
} else {
$(".gallery-current-image").css("object-fit","cover");
}
})
var images = [];
var i = 0;
for (var image of $(".gallery-item-image")){
images.push($(image).attr("src"));
}
setInterval(function(){return i++}, 2000);
setInterval(function(){
if (i == images.length){
i = 0;
var prev_dot = $(".gallery-dot")[images.length-1];
} else {
var prev_dot = $(".gallery-dot")[i-1];
}
var current_dot = $(".gallery-dot")[i];
$(".gallery-current-image").attr("src",images[i]);
$(current_dot).css("background-color", "#1a1a1a");
$(prev_dot).css("background-color", "#a6a6a6");
}, 2000);
$(".gallery-dot").on("click",function(){
let clicked_dot_index = $(this).index();
let old_dot = $(".gallery-dot")[i];
let new_dot = $(".gallery-dot")[clicked_dot_index];
$(old_dot).css("background-color", "#a6a6a6");
$(new_dot).css("background-color", "#1a1a1a");
$(".gallery-current-image").attr("src",images[clicked_dot_index]);
i = clicked_dot_index;
});
});.gallery-all-images,.low-res{
display: none;
}
.gallery-wrapper{
width: 100%;
height: 500px;
}
.gallery-img-wrapper{
width: 100%;
height: 100%;
position: relative;
}
.gallery-current-image{
width: 100%;
height: 100%;
object-fit: cover;
background-color: black;
}
.gallery-dots{
width: 100%;
height: 40px;
text-align: center;
position: absolute;
bottom: 0;
background-color: rgba(89, 89, 89, 0.65);
border-top: 2px solid #fff;
border-radius: 100px 100px 0 0;
}
.gallery-dot{
width: 1rem;
height: 35%;
background-color: #a6a6a6;
border-radius: 100%;
display: inline-block;
margin-top: 0.70rem;
cursor: pointer;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="static/static/main.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<title>Document</title>
</head>
<body>
<div class="gallery">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="gallery-wrapper">
<div class="gallery-img-wrapper">
<img src="https://belgium-guide.ru/wp-content/uploads/2018/10/foto-hallerbosa-17.jpg" alt="" class="gallery-current-image">
<div class="gallery-dots">
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
</div>
</div>
<div class="gallery-all-images">
<img class="gallery-item-image" src="https://belgium-guide.ru/wp-content/uploads/2018/10/foto-hallerbosa-17.jpg" alt="">
<img class="gallery-item-image" src="https://tumentoday.ru/media/gallery_images/bialowiezaforestctomaszwilk0.jpg" alt="">
<img class="gallery-item-image" src="https://avatars.mds.yandex.net/get-pdb/25978/ee1780c5-7223-4d25-8ed3-6c16c2c2a1fa/orig" alt="">
<img class="gallery-item-image" src="https://avatars.mds.yandex.net/get-pdb/25978/3b8dd671-b906-4216-a8f7-60b3ffdb5a16/orig" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="static/static/scripts.js"></script>
</body>
</html>Я хочу чтобы после клика на одну из точек, слайдер стоял на месте еще 2 секунды. Сейчас же, если подождать секунду-полторы, то таймер продолжит идти в своим чередом. Я пытался сбросить таймер и поставить по новой,но, слайдер почему-то ускорялся в 2 раза после каждого сброса интервала.
Answer 1
Самый простой вариант - завести флаг, который пропускает одно переключение:
$(document).ready(function() {
$(".gallery-dot:nth-child(1)").css("background-color", "#1a1a1a");
$(window).on("resize load", function() {
if ($(window).width() <= 767) {
$(".gallery-current-image").css("object-fit", "contain");
} else {
$(".gallery-current-image").css("object-fit", "cover");
}
})
var images = [];
var i = 0;
var skipOneChange;
for (var image of $(".gallery-item-image")) {
images.push($(image).attr("src"));
}
setInterval(function() {
if (skipOneChange) {
skipOneChange = false;
return;
}
i++
if (i == images.length) {
i = 0;
var prev_dot = $(".gallery-dot")[images.length - 1];
} else {
var prev_dot = $(".gallery-dot")[i - 1];
}
var current_dot = $(".gallery-dot")[i];
$(".gallery-current-image").attr("src", images[i]);
$(current_dot).css("background-color", "#1a1a1a");
$(prev_dot).css("background-color", "#a6a6a6");
}, 2000);
$(".gallery-dot").on("click", function() {
let clicked_dot_index = $(this).index();
let old_dot = $(".gallery-dot")[i];
let new_dot = $(".gallery-dot")[clicked_dot_index];
$(old_dot).css("background-color", "#a6a6a6");
$(new_dot).css("background-color", "#1a1a1a");
$(".gallery-current-image").attr("src", images[clicked_dot_index]);
i = clicked_dot_index;
skipOneChange = true; ///
});
});.gallery-all-images,
.low-res {
display: none;
}
.gallery-wrapper {
width: 100%;
height: 500px;
}
.gallery-img-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.gallery-current-image {
width: 100%;
height: 100%;
object-fit: cover;
background-color: black;
}
.gallery-dots {
width: 100%;
height: 40px;
text-align: center;
position: absolute;
bottom: 0;
background-color: rgba(89, 89, 89, 0.65);
border-top: 2px solid #fff;
border-radius: 100px 100px 0 0;
}
.gallery-dot {
width: 1rem;
height: 35%;
background-color: #a6a6a6;
border-radius: 100%;
display: inline-block;
margin-top: 0.70rem;
cursor: pointer;
}<div class="gallery">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="gallery-wrapper">
<div class="gallery-img-wrapper">
<img src="https://belgium-guide.ru/wp-content/uploads/2018/10/foto-hallerbosa-17.jpg" alt="" class="gallery-current-image">
<div class="gallery-dots">
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
</div>
</div>
<div class="gallery-all-images">
<img class="gallery-item-image" src="https://belgium-guide.ru/wp-content/uploads/2018/10/foto-hallerbosa-17.jpg" alt="">
<img class="gallery-item-image" src="https://tumentoday.ru/media/gallery_images/bialowiezaforestctomaszwilk0.jpg" alt="">
<img class="gallery-item-image" src="https://avatars.mds.yandex.net/get-pdb/25978/ee1780c5-7223-4d25-8ed3-6c16c2c2a1fa/orig" alt="">
<img class="gallery-item-image" src="https://avatars.mds.yandex.net/get-pdb/25978/3b8dd671-b906-4216-a8f7-60b3ffdb5a16/orig" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Вариант посложнее, с таймаутами вместо таймера.
по клику удаляется старый таймаут и навешивается новый, таким образом отсчет идет непосредственно от момента клика
$(".gallery-dot:nth-child(1)").css("background-color", "#1a1a1a");
$(window).on("resize load", function() {
$(".gallery-current-image").css("object-fit",
$(window).width() <= 767 ? "contain" : "cover");
})
var images = [];
var i = 0;
for (var image of $(".gallery-item-image")) {
images.push($(image).attr("src"));
}
var to = setTimeout(tick, 2000);
$(".gallery-dot").on("click", function() {
render(i = $(this).index());
clearTimeout(to);
to = setTimeout(tick, 2000);
});
function tick() {
render(i = i === images.length - 1 ? 0 : i + 1);
to = setTimeout(tick, 2000);
}
function render(index) {
$(".gallery-current-image").attr("src", images[index]);
$(".gallery-dot").css("background-color", "#a6a6a6")
.eq(index).css("background-color", "#1a1a1a");
}.gallery-all-images,
.low-res {
display: none;
}
.gallery-wrapper {
width: 100%;
height: 500px;
}
.gallery-img-wrapper {
width: 100%;
height: 100%;
position: relative;
}
.gallery-current-image {
width: 100%;
height: 100%;
object-fit: cover;
background-color: black;
}
.gallery-dots {
width: 100%;
height: 40px;
text-align: center;
position: absolute;
bottom: 0;
background-color: rgba(89, 89, 89, 0.65);
border-top: 2px solid #fff;
border-radius: 100px 100px 0 0;
}
.gallery-dot {
width: 1rem;
height: 35%;
background-color: #a6a6a6;
border-radius: 100%;
display: inline-block;
margin-top: 0.70rem;
cursor: pointer;
}<div class="gallery">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="gallery-wrapper">
<div class="gallery-img-wrapper">
<img src="https://belgium-guide.ru/wp-content/uploads/2018/10/foto-hallerbosa-17.jpg" alt="" class="gallery-current-image">
<div class="gallery-dots">
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
<div class="gallery-dot"></div>
</div>
</div>
<div class="gallery-all-images">
<img class="gallery-item-image" src="https://belgium-guide.ru/wp-content/uploads/2018/10/foto-hallerbosa-17.jpg" alt="">
<img class="gallery-item-image" src="https://tumentoday.ru/media/gallery_images/bialowiezaforestctomaszwilk0.jpg" alt="">
<img class="gallery-item-image" src="https://avatars.mds.yandex.net/get-pdb/25978/ee1780c5-7223-4d25-8ed3-6c16c2c2a1fa/orig" alt="">
<img class="gallery-item-image" src="https://avatars.mds.yandex.net/get-pdb/25978/3b8dd671-b906-4216-a8f7-60b3ffdb5a16/orig" alt="">
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-
13:03
-
12:54
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
-
21:25
-
07:04
-
07:46
-
21:56
Перевод документов на английский язык: Важность и ключевые аспекты
-
20:52
-
11:43
-
07:54
Какие существуют виды рекламных бордов и как выбрать подходящий?
ТОП-10
- Почему SERVER_ADDR имеет не тот IP 47534 visits
- Как заменить $_SERVER[REMOTE_ADDR] на IP клиента в PHP за двумя Nginx? 30486 visits
- Хочу вывести несколько строк из массива в один div, выводит только много undefined; подскажите, что делать? 23607 visits
- Как через css изменить цвет png изображения? 10340 visits
- Blob video url download 9948 visits
- Php curl запрос через прокси с авторизацией 9201 visits
- Работа с captcha vk api 8081 visits
© "hostciti.net" 06.11.2024 | 11:34