Hello. There are blocks on the page.

.slider1 { display: block } .slider2 { display: none } .slider3 { display: none } 
 <div class="slider1">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 1</div> <div class="slider2">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 2</div> <div class="slider3">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 3</div>

How can I change the value of the blocks so that the next block is shown every 5 seconds, and the previous one is hidden, and so on.

I would be grateful for any useful information.

  • Timers are no longer in fashion? - user207618
  • With javascript is not very ... I would have some kind of example - iKey

3 answers 3

 var elements = document.querySelectorAll('.sliders'); var counter = 1; setInterval(function(){ for (var i = 0; i < elements.length; ++i) { elements[i].style.display = 'none'; } if (counter > elements.length - 1) counter = 0; elements[counter].style.display = 'block'; counter++; }, 1000); 
 .slider1 { display: block } .slider2 { display: none } .slider3 { display: none } 
 <div class="slider1 sliders">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 1</div> <div class="slider2 sliders">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 2</div> <div class="slider3 sliders">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 3</div>

setInterval has the syntax setTimeout(func / code, delay[, arg1, arg2...]) , where

func/code - Function or line of code to execute.

delay - The delay in milliseconds, 1000 milliseconds is 1 second.

arg1, arg2… - Arguments to pass to the function.

Here we find all the elements with which to manipulate.

  • At each iteration of the counter, we hide all the blocks and display only one specific one.
  • Increase the counter.
  • Repeat the procedure again (or rather, do it the timer).
  • If the counter exceeds the number of items, reset it.
  • With an interval you can run into different overlays and glitches, sadness. - user207618
  • @Other as well as with the timeout, in fact - Alexey Shimansky
  • one
    The timeout at least guarantees that there will be at least N between the intervals. The interval will be slightly slowed down and the glitches will increase with a snowball. - user207618
  • @Other and even if the user is sitting on IE6, and even straight from 2005 .... Horror, horror, what is happening. - Aleksey Shimanskyy
  • one
    Modern browsers can also hang a lot too :) - user207618

Simply and easily:

 let msgs = [document.querySelector('.slider1'), document.querySelector('.slider2'), document.querySelector('.slider3')], last = null; const slider = n => { if(last) last.style.display = 'none'; if(n >= msgs.length) n = 0; last = msgs[n]; last.style.display = 'block'; setTimeout(_ => slider(++n), 1000); } slider(0); 
 .slider1 { display: block } .slider2 { display: none } .slider3 { display: none } 
 <div class="slider1">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 1</div> <div class="slider2">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 2</div> <div class="slider3">Π˜Π½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡ Π±Π»ΠΎΠΊΠ° 3</div>

  • one
    Have you read Π‘ javascript Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ... ? Maybe you will write something simpler, without ES6? - u_mulder Nov.
  • @u_mulder, if you need a ready-made solution, this is not freelancing. This is help. - user207618

CSS animation cannot animate display: none; , but you can try such a hack. Compatibility: IE 10+

Example

 .slider_1 { animation: seconds 15.0s forwards infinite; animation-delay: 0s; position: absolute; background: red; opacity: 0; left: -9999px; } .slider_2 { animation: seconds 15.0s forwards infinite; animation-delay: 5s; position: absolute; background: green; opacity: 0; left: -9999px; } .slider_3 { animation: seconds 15.0s forwards infinite; animation-delay: 10s; position: absolute; background: blue; opacity: 0; left: -9999px; } @keyframes seconds { 0% { opacity: 1; left: 0; } 33.99% { opacity: 1; left: 0; } 34% { opacity: 0; left: -9999px; } } 
 <div class="slider_1">ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт</div> <div class="slider_2">Π’Ρ‚ΠΎΡ€ΠΎΠΉ элСмСнт</div> <div class="slider_3">Π’Ρ€Π΅Ρ‚ΠΈΠΉ элСмСнт</div>

I looked that с javascript Π½Π΅ ΠΎΡ‡Π΅Π½ΡŒ , and decided that we are talking about pure CSS: P I didn’t understand the question a bit, but I still think that such a solution has a right to exist.

  • Children, but let's imagine that we have 1999 slides! - user207618