Форум

James · #1 (**permalink**) 09.04.2020, 19:19

Добрый вечер помогите пожалуста решить одну задачку.
Есть карта на ней 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

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>

James · #3 (**permalink**) 09.04.2020, 20:03

спасибо огромное)

Форум

Справочник

Discord чат

Курсы javascript