Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 09.04.2020, 19:19
Новичок на форуме
Отправить личное сообщение для James Посмотреть профиль Найти все сообщения от James
 
Регистрация: 09.04.2020
Сообщений: 2

Перебор элементов на карте.
Добрый вечер помогите пожалуста решить одну задачку.
Есть карта на ней 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);
Ответить с цитированием
  #2 (permalink)  
Старый 09.04.2020, 19:52
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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>
Ответить с цитированием
  #3 (permalink)  
Старый 09.04.2020, 20:03
Новичок на форуме
Отправить личное сообщение для James Посмотреть профиль Найти все сообщения от James
 
Регистрация: 09.04.2020
Сообщений: 2

спасибо огромное)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
перебор DOM элементов по кругу Brick Javascript под браузер 7 09.01.2019 23:00
Перебор элементов массива и сравнение со значением TheSanches Общие вопросы Javascript 7 26.02.2018 19:54
Перебор соседних элементов по "кругу" falkone jQuery 14 03.09.2015 20:51
Перебор дерева элементов - не хочет работать скрипт... caca0 Javascript под браузер 7 18.05.2012 20:07
Перебор DOM элементов DjDiablo jQuery 3 04.02.2011 16:26