#javascript #jquery
Вопрос:
Я создаю учебник, в котором в 4 этапа объясняется, как работает приложение.
В настоящее время при нажатии на один из шагов добавляется класс, который изменяет текст и отображает дополнительное изображение.
Я бы хотел, чтобы этот процесс также был автоматическим и запускал это действие на каждом шаге, последовательно, через несколько секунд.
Я думаю, что мне нужно использовать функцию setTimeout (), но я не могу представить, как перейти от одного шага к другому ( и в идеале сделать цикл, когда процесс перейдет к шагу 4).
вот мой код, чтобы он был более понятным.
Большое спасибо за вашу помощь
jQuery(".tutorial-point").click(function (e) { jQuery(".tutorial-point").removeClass("active-tuto"); jQuery(this).addClass("active-tuto"); }); jQuery('.tutorial-point').on('click', function (e) { e.preventDefault(); var imgSRC = jQuery(this).data('src'); jQuery('#imageFlowchart').html('lt;img src="' imgSRC '" alt="" /gt;'); }); .tutorial-container { background: #002832; display: flex; flex-direction:column; justify-content: space-around; max-width: 1200px; padding: 5rem 1rem; margin: auto; } .tutorial-text-block { max-width: 430px; } .tutorial-title { color: white; padding-bottom: 2rem; padding-top: 2rem; } .tutorial-point { cursor: pointer; color: #7384A7; padding: 10px; display: flex; } .tutorial-point:before { content: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); padding-right: 12px; } .tutorial-img-block { align-self: center; } .active-tuto { color: white; display: flex; } .active-tuto:before { content: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); padding-right: 12px; } .tuto-img { height: 360px; width: 360px; } .tuto-img img { height: 360px; width: 360px; animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } #tutoImg { height: 360px; width: 360px; } .tutorial { margin-top: 6rem; width: 100%; background-color:#002832 ; } .tutorial.img-block { align-self: center; } .white-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); } .black-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="tutorial"gt; lt;div class="tutorial-container"gt; lt;div class="tutorial-text-block"gt;Here is the tutoriallt;/divgt; lt;div class="tutorial-paragraph-block"gt; lt;div class="active-tuto tutorial-point text-font-16" data-src="https://via.placeholder.com/150"gt; lt;divgt;Step 1lt;/divgt; lt;/divgt; lt;div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/151"gt; lt;divgt;Step 2lt;/divgt; lt;/divgt; lt;div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/152"gt; lt;divgt;Step 3lt;/divgt; lt;/divgt; lt;div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/153"gt; lt;divgt;Step 4lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="tutorial-img-block"gt; lt;div id="imageFlowchart" class="tuto-img"gt; lt;img src="https://via.placeholder.com/150" alt=""gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; Ответ №1:
Это может сработать, используя trigger() функцию
const interval = setInterval(() =gt; { const next = jQuery('.active-tuto').next('.tutorial-point'); next.length gt; 0 ? next.trigger('click') : clearInterval(interval); }, 3000); Он запускает событие щелчка на следующем шаге каждые 3 секунды до последнего шага.
let interval; const auto = () =gt; { if (interval) { clearInterval(interval); } interval = setInterval(() =gt; { const next = jQuery('.active-tuto').next('.tutorial-point'); next.length gt; 0 ? next.trigger('click') : clearInterval(interval); }, 3000); }; auto(); jQuery(".tutorial-point").click(function (e) { jQuery(".tutorial-point").removeClass("active-tuto"); jQuery(this).addClass("active-tuto"); auto(); }); jQuery('.tutorial-point').on('click', function (e) { e.preventDefault(); var imgSRC = jQuery(this).data('src'); jQuery('#imageFlowchart').html('lt;img src="' imgSRC '" alt="" /gt;'); }); .tutorial-container { background: #002832; display: flex; flex-direction:column; justify-content: space-around; max-width: 1200px; padding: 5rem 1rem; margin: auto; } .tutorial-text-block { max-width: 430px; } .tutorial-title { color: white; padding-bottom: 2rem; padding-top: 2rem; } .tutorial-point { cursor: pointer; color: #7384A7; padding: 10px; display: flex; } .tutorial-point:before { content: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); padding-right: 12px; } .tutorial-img-block { align-self: center; } .active-tuto { color: white; display: flex; } .active-tuto:before { content: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); padding-right: 12px; } .tuto-img { height: 360px; width: 360px; } .tuto-img img { height: 360px; width: 360px; animation: fadeIn 1s; -webkit-animation: fadeIn 1s; -moz-animation: fadeIn 1s; -o-animation: fadeIn 1s; -ms-animation: fadeIn 1s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-moz-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-webkit-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-o-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } @-ms-keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } #tutoImg { height: 360px; width: 360px; } .tutorial { margin-top: 6rem; width: 100%; background-color:#002832 ; } .tutorial.img-block { align-self: center; } .white-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-circle-line.svg"); } .black-logo { background-image: url("https://cdn.unitplus.eu/images/checkbox-blank-circle-line.svg"); } lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"gt;lt;/scriptgt; lt;div class="tutorial"gt; lt;div class="tutorial-container"gt; lt;div class="tutorial-text-block"gt;Here is the tutoriallt;/divgt; lt;div class="tutorial-paragraph-block"gt; lt;div class="active-tuto tutorial-point text-font-16" data-src="https://via.placeholder.com/150"gt; lt;divgt;Step 1lt;/divgt; lt;/divgt; lt;div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/151"gt; lt;divgt;Step 2lt;/divgt; lt;/divgt; lt;div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/152"gt; lt;divgt;Step 3lt;/divgt; lt;/divgt; lt;div class="tutorial-point text-font-16" data-src="https://via.placeholder.com/153"gt; lt;divgt;Step 4lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt; lt;div class="tutorial-img-block"gt; lt;div id="imageFlowchart" class="tuto-img"gt; lt;img src="https://via.placeholder.com/150" alt=""gt; lt;/divgt; lt;/divgt; lt;/divgt; lt;/divgt;