Как я могу сделать это автоматически?

Question

SO Я построил это, с очень простым javascript, чтобы позволить пользователю циклически перебирать каждую функцию, щелкая по кнопке. Мне интересно, есть ли возможность позволить ему автоматически циклически переключаться между каждой кнопкой, сохраняя при этом ее интерактивность.

Here's the jsfiddle

<img id="myImage" src="http://teetertv.com/wp-content/uploads/2016/12/app-features-calendar.png"> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-calendar.png'"><i class="fa fa-line-chart" aria-hidden="true"></i></button> <p class="features-text-app">Track use of the Teeter Inversion Table, including session length, frequency, and angle. </p> </div> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-trends.png'"><i class="fa fa-area-chart" aria-hidden="true"></i></button> <p class="features-text-app"> Track your pain levels (pre and post inversion) and triggers. </p></div> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-notifications.png'"><i class="fa fa-calendar" aria-hidden="true"></i></button> <p class="features-text-app"> Set reminders/push notifications to use the Teeter.</p></div> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-countdown.png'"><i class="fa fa-volume-up" aria-hidden="true"></i></button> <p class="features-text-app"> Turn on optional voice prompts from Roger Teeter, offering guidance and tips to ensure the best experience. </p></div> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-music.png'"><i class="fa fa-music" aria-hidden="true"></i></button> <p class="features-text-app">Select from a playlist of relaxing tunes while inverting. </p></div> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-discover.png'"><i class="fa fa-newspaper-o" aria-hidden="true"></i></button> <p class="features-text-app">Explore the Discover feed, offering helpful product use tips and healthy lifestyle advice. </p></div> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-support.png'"><i class="fa fa-info" aria-hidden="true"></i></button> <p class="features-text-app">Gain easy access to product support, videos, and contact information. </p></div> 
<div style="display:table;"><button class="features-button-app" onclick="document.getElementById('myImage').src='http://teetertv.com/wp-content/uploads/2016/12/app-features-stories.png'"><i class="fa fa-comments" aria-hidden="true"></i></button> <p class="features-text-app"> Offer feedback, submit your own success story and join the Teeter community. </p></div> 


    .features-button-app { 

    height: 66px; 
    border-color: #ffffff; 
border-width: 1px; 
background-color: #a8c446; 
height: 64px; 
width: 64px; 
line-height: 64px; 
border-radius: 50%; 
border-width: 0; 
position: relative; 
top: 1px; 
left: 1px; 
margin: 0; 
border-radius: 50%; 
color: #ffffff; 
font-size: 32px; 
float: left; 
    margin-right: 29px;} 

.features-button-app:active { 
border-width: 1px; 
background-color: #fff; 
border-color: #a8c446; 
color: #a8c446; 
    border-style: solid;} 

.features-button-app:hover { 
border-width: 1px; 
background-color: #fff; 
border-color: #a8c446; 
color: #a8c446; 
border-style: solid;} 

.features-button-app:focus { 
border-width: 1px; 
background-color: #fff; 
border-color: #a8c446; 
color: #a8c446; 
border-style: solid; 
    outline-color: transparent !important;} 
.features-text-app { 
line-height:1; 
margin-top:0px; !important; 
margin-bottom:15% !important;} 

Answer 1

этот образец не является полным или эффективным, но он работает и даст вам представление. Он настроен для запуска только один раз.

Html настроен для вызова функции с номером индекса.

   <img id="myImage" src="http://teetertv.com/wp-content/uploads/2016/12/app-features-calendar.png"> 
       <div style="display:table;"><button type="button" class="features-button-app" onclick="setImage(0)"><i class="fa fa-line-chart" aria-hidden="true"></i></button> <p class="features-text-app">Track use of the Teeter Inversion Table, including session length, frequency, and angle. </p> </div> 
       <div style="display:table;"><button type="button" class="features-button-app" onclick="setImage(1)"><i class="fa fa-area-chart" aria-hidden="true"></i></button> <p class="features-text-app"> Track your pain levels (pre and post inversion) and triggers. </p></div> 
       <div style="display:table;"><button type="button" class="features-button-app" onclick="setImage(2)"><i class="fa fa-calendar" aria-hidden="true"></i></button> <p class="features-text-app"> Set reminders/push notifications to use the Teeter.</p></div> 
       <div style="display:table;"><button type="button" class="features-button-app" onclick="setImage(3)"><i class="fa fa-volume-up" aria-hidden="true"></i></button> <p class="features-text-app"> Turn on optional voice prompts from Roger Teeter, offering guidance and tips to ensure the best experience. </p></div> 
       <div style="display:table;"><button type="button" class="features-button-app" onclick="setImage(4)"><i class="fa fa-music" aria-hidden="true"></i></button> <p class="features-text-app">Select from a playlist of relaxing tunes while inverting. </p></div> 
       <div style="display:table;"><button type="button" class="features-button-app" onclick="setImage(5)"><i class="fa fa-newspaper-o" aria-hidden="true"></i></button> <p class="features-text-app">Explore the Discover feed, offering helpful product use tips and healthy lifestyle advice. </p></div> 
       <div style="display:table;"><button type="button"class="features-button-app" onclick="setImage(6)"><i class="fa fa-info" aria-hidden="true"></i></button> <p class="features-text-app">Gain easy access to product support, videos, and contact information. </p></div> 
       <div style="display:table;"><button type="button" class="features-button-app" onclick="setImage(7)"><i class="fa fa-comments" aria-hidden="true"></i></button> <p class="features-text-app"> Offer feedback, submit your own success story and join the Teeter community. </p></div> 

Пути изображений, помещенные в массив и набор интервалов времени.

   // each path put in an array to cycle through 
        var cimg = ['http://teetertv.com/wp-content/uploads/2016/12/app-features-calendar.png', 
       'http://teetertv.com/wp-content/uploads/2016/12/app-features-trends.png', 
       'http://teetertv.com/wp-content/uploads/2016/12/app-features-notifications.png', 
       'http://teetertv.com/wp-content/uploads/2016/12/app-features-countdown.png', 
       'http://teetertv.com/wp-content/uploads/2016/12/app-features-music.png', 
       'http://teetertv.com/wp-content/uploads/2016/12/app-features-discover.png', 
       'http://teetertv.com/wp-content/uploads/2016/12/app-features-support.png', 
       'http://teetertv.com/wp-content/uploads/2016/12/app-features-stories.png'] 

        // gobal index used to keep track of where you are 
        var index = 0; 

        // turn on interval 
        var interval = setInterval(function() { 
         document.getElementById('myImage').src = cimg[index]; 
         document.getElementsByTagName("button")[index++].focus(); 
         if (index >= cimg.length) { 
          // all images seen so shut it off. 
          clearInterval(interval); 
         } 
        }, 3000) 

        // click event handler that will turn off the interval if user clicks on a button. 
        function setImage(num) { 
         clearInterval(interval); 
         document.getElementById('myImage').src = cimg[num]; 
        } 

Answer 2

Функция вы ищете либо setTimeout или setInterval, которые определяют период ожидания перед выполнением функции или между последовательными выполнениями этой функции, соответственно.