所以我用非常简单的javascript构建了这个，只是为了让用户在点击按钮时循环浏览每个功能。我想知道是否有一个选项让它自动循环显示每个按钮，同时仍允许它是交互式的。
<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;}
答案 0 :(得分：0)
您要查找的功能是setTimeout或setInterval，它们分别指定在执行函数之前或在该函数的连续执行之间等待的时间段。
答案 1 :(得分：0)
此示例不完整或有效但它可以工作，并会给你一个想法它设置只运行一次。
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];
}