Tell me how to change the code in order to implement the animation, so that every 5 seconds there was an animation given (mainpage__top__caption, mainpage__top - line-1, etc.) At the moment it all works when there is a video, and when the video ends It launches a trail movie and trail texts, how to implement without a video? I heard the setTimeout function, but I don’t know how to implement it and whether it is needed here at all ... Here is the code itself, JS

function init_video_carousel() { var cont = $('.js-video_background'); var playlist = $('.js-video_background-playlist'); var playlistItems = $('li', playlist); var player = $('.js-video_background-player'); var video = player.get(0); if (!cont.length) { return; } play_video(0); // Π’ΠΊΠ»ΡŽΡ‡Π°Π΅ΠΌ ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅ Π²ΠΈΠ΄Π΅ΠΎ ΠΏΡ€ΠΈ ΠΎΠΊΠΎΠ½Ρ‡Π°Π½ΠΈΠΈ Ρ€ΠΎΠ»ΠΈΠΊΠ° video.addEventListener('ended', function() { play_video((player.data('currentVideo')) + 1); }); function play_video(index) { var min = 0, max = playlistItems.length; if (index < min) { index = max; } else if (index >= max) { index = min; } var active = playlistItems.eq(index); var activeClass = 'active'; playlistItems.removeClass(activeClass); active.addClass(activeClass); player.data('currentVideo', index); player.fadeOut('fast', function() { if (active.data('src')) { video.src = active.data('src'); } if (active.data('poster')) { video.poster = active.data('poster'); } video.load(); $('.mainpage__top').addClass('changing'); $('.mainpage__top__caption,.mainpage__top__line,.mainpage__top__description').fadeOut('fast', function() { $('.mainpage__top__caption').text(active.data('caption')); $('.mainpage__top--line-1').text(active.data('line-1')); $('.mainpage__top--line-2').text(active.data('line-2')); $('.mainpage__top__description--line-1').text(active.data('description-line-1')); $('.mainpage__top__description--line-2').text(active.data('description-line-2')); $(this).fadeIn('slow'); }); player.fadeIn('slow', function() { $('.mainpage__top').removeClass('changing'); video.play(); }); }); } } 
 .video_background { background: url('/wp-content/uploads/2017/07/header-bacground_opt.jpg') no-repeat center center fixed; background-size: cover; height: 576px; width: 100%; position: absolute; z-index: -1; overflow: hidden; background-size: cover; } .video_background video { max-height: 576px; margin: auto; display: block; } .mainpage__top { font-size: 10px; } @media (min-width: 1440px) { .video_background video { max-height: none; width: 100%; height: auto; position: absolute; top: 0; bottom: 0; margin: auto; } } @media (min-width: 720px) and (max-width: 1200px) { .mainpage__top { font-size: 7px; } .mainpage__top__lines .mainpage__top--line-1 { width: 600px !important; margin-bottom: 0px !important; } } @media (min-width: 500px) and (max-width: 720px) { .mainpage__top { font-size: 5px; } .video_background { display: none; } .mainpage__top--line-1 { width: 450px !important; margin-bottom: 0px !important; } } @media (max-width: 500px) { .mainpage__top { font-size: 4px; } .mainpage__top__line { font-size: 6.5em !important; margin-bottom: 0px !important; padding: 0px 15px !important; } .mainpage__top__caption { margin-bottom: 20px !important; } .mainpage__top--line-1 { width: 270px; } .video_background { display: none; } } .mainpage__top__line { font-weight: 300 !important; } } .mainpage__top__caption, .mainpage__top__line, .mainpage__top__description { -webkit-transition: all 500ms; -o-transition: all 500ms; transition: all 500ms; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); opacity: 1; } .changing .mainpage__top__caption, .changing .mainpage__top__line, .changing .mainpage__top__description { -webkit-transform: scale(0, 1); -ms-transform: scale(0, 1); -o-transform: scale(0, 1); transform: scale(0, 1); opacity: .5; } .mainpage__top__caption::after, .mainpage__top__line::after { content: "\A"; white-space: pre; } .mainpage__top__caption { font-size: 3.6em; background-color: #f0ad4e; color: #fff; text-transform: uppercase; display: inline-block; line-height: 1.6; margin-top: 0; padding: 8px 32px; margin-top: 65px; margin-bottom: 40px; line-height: 1.04; font-weight: 100; } .mainpage__top__lines { position: relative; margin-bottom: 10px; } .mainpage__top__lines::before { content: ''; position: absolute; width: 1.2em; height: 100%; left: 0; top: 0; background-color: #fff; } .mainpage__top__line { color: #fff; font-size: 7em; line-height: 1; display: block; padding: 0px 32px; font-weight: 600; position: relative; margin-bottom: 10px; } .mainpage__top--line-1 { margin-top: 0; } .mainpage__top--line-2 { margin-bottom: 20px; } .mainpage__top__description { font-size: 2.3em; color: #fff; padding: 8px 0; line-height: 2; margin-bottom: 34px; text-transform: uppercase; } .mainpage__top { font-size: 10px; height: 500px; } @media (max-width: 767px) { .mainpage__top { font-size: 7px; } } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="videobg_pict"> <div class="video_background js-video_background"> <video class="video_background-player js-video_background-player" playsinline autoplay muted id="videobg" style=""></video> <ul class="js-video_background-playlist" style="display: none;"> <li data-src="/wp-content/uploads/2017/07/header.mp4" data-caption="Π Π°Π·Ρ€Π°Π±ΠΎΡ‚ΠΊΠ° сайтов" data-line-1="Π˜ΡΠΏΡ€Π°Π²Π»Π΅Π½ΠΈΡ ошибок" data-line-2="ВсС ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΊΠΈ Ρ‡Π΅Ρ€Π΅Π· Validator" data-description-line-1="Π Π°Π±ΠΎΡ‚Π° со всСми странами." data-description-line-2="ΠžΠ±Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° Украинском,Русском,Английском"></li> <li data-src="/wp-content/uploads/2017/07/header.mp4" data-caption="ΠžΠΏΡ‚ΠΈΠΌΠΈΠ·Π°Ρ†ΠΈΡ сайтов ΠΏΠΎΠ΄ Wordpress" data-line-1="Π‘ΠΊΠΎΡ€ΠΎΡΡ‚ΡŒ ΠΎΡ‚ΠΊΠ»ΠΈΠΊΠ°" data-line-2="ΠŸΡ€ΠΎΠ²Π΅Ρ€ΠΊΠ° с PageSpeed Insights" data-description-line-1="Π Π°Π±ΠΎΡ‚Π° со всСми странами." data-description-line-2="ΠžΠ±Ρ‰Π΅Π½ΠΈΠ΅ Π½Π° Украинском,Русском,Английском"></li> </ul> </div> <div class="container"> <div class="mainpage__top"> <div><span class="mainpage__top__caption"></span></div> <div class="mainpage__top__lines"> <div><span class="mainpage__top__line mainpage__top--line-1"></span></div> <div><span class="mainpage__top__line mainpage__top--line-2"></span></div> </div> <div><span class="mainpage__top__description mainpage__top__description--line-1"></span></div> <div><span class="mainpage__top__description mainpage__top__description--line-2"></span></div> </div> </div> </div>

  • And we should guess a marking? - Cheg
  • @Cheg Attached - Ilya Burmaka

1 answer 1

That's right, you heard, there is such a function as setTimeout and even there is setInterval. Both functions perform callback on the expiration of a specified time in ms, but with the only difference that setTimeout performs the function once, and setInterval is infinite.

Every 5s to write to the console:

 setInterval(function(){ console.log("Π§Π΅Ρ€Π΅Π· 5 сСк эта запись появится снова."); }, 5 * 1000);