Перебор элементов на карте.
Добрый вечер помогите пожалуста решить одну задачку.
Есть карта на ней 27 меток, надо сделать что бы они появлялись по очереди и изчезали безконечно, но, если б по две то без проблем а надо что бы было видно по 4, то есть 5 появляется 1 изчезает, 6 появляется 2 изчезает... и так по кругу. У меня вышло что то типо этого: но в конце они полностью изчезают и просто начинают появлятся сначала но надо что бы 3 элемента постоянно оставались. <div class="map-point first addclass"></div> <div class="map-point first addclass"></div> <div class="map-point first addclass"></div> <div class="map-point first addclass"></div> <div class="map-point"></div> <div class="map-point"></div> <div class="map-point"></div> <div class="map-point"></div> <div class="map-point"></div> <div class="map-point"></div>
function sec() {
var len = $(".first").length;
$(".first:first").css({'opacity':'0','transform':'rotateX(0deg)'}).removeClass("first");
$(".first:last").next(".map-point").css({'opacity':'1','transform':'rotateX(0deg)'}).addClass("first");
if(len<2){
$(".addclass").addClass("first");
}
}
setInterval(sec, 500);
|
James,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
display: flex;
}
.map-point {
height: 20px;
width: 20px;
background-color: #EEE8AA;
border-radius: 50%;
transition: 1s;
}
.map-point.red{
background-color: #FF0000;
}
</style>
<script>
addEventListener("DOMContentLoaded", function()
{
let divs = document.querySelectorAll(".map-point"),
len = divs.length,
index = len - 1;
limit = 4;
const loop = () => {
divs[index].classList.remove("red");
index = ++index % len;
for (let i = 0; i < limit; i++) {
let k = (index + i) % len;
divs[k].classList.add("red");
}
window.setTimeout(loop, 600)
};
loop()
}
);
</script>
</head>
<body>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div>
<div class="map-point"></div></body>
</html>
|
спасибо огромное)
|
| Часовой пояс GMT +3, время: 01:46. |