我正在尝试制作申请表格，但首先我需要制作它以便旋转木马不会移动，而我只希望它在按下某些按钮时移动（＆＃34; next页面＆＃34;或＆＃34;最后一页＆＃34;）。
这是我的代码：
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Application Page one</title>
<!-- Bootstrap Core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/modern-business.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">SERVER NAME</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a href="apply.html">Apply</a>
</li>
<li>
<a href="staff.html">Staff</a>
</li>
<li>
<a href="faq.html">FAQ</a>
</li>
<li>
<a href="contact.html">Contact us</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<br>
<div id="carousel-example-generic" class="carousel slide" data-pause="false" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<center>
<h3>Declaration:</h3>
<p>The providers ("we", "us", "our") of the service provided by this web site ("Service") are not responsible for any user-generated content and accounts ("Content"). Content submitted express the views of their author only.</p>
<p>You agree to not use the Service to submit or link to any Content which is defamatory, abusive, hateful, threatening, spam or spam-like, likely to offend, contains adult or objectionable content, contains personal information of others,
risks copyright infringement, encourages unlawful activity, or otherwise violates any laws.</p>
<p>All Content you submit or upload may be reviewed by staff members. All Content you submit or upload may be sent to third-party verification services (including, but not limited to, spam prevention services). Do not submit any Content
that you consider to be private or confidential.</p>
<p>We reserve the rights to remove or modify any Content submitted for any reason without explanation. Requests for Content to be removed or modified will be undertaken only at our discretion. We reserve the right to take action against
any account with the Service at any time.</p>
<p>You are granting us with a non-exclusive, permanent, irrevocable, unlimited license to use, publish, or re-publish your Content in connection with the Service. You retain copyright over the Content.</p>
<p>These terms may be changed at any time without notice.</p>
<p>If you do not agree with these terms, please do not register or use this Service. If you wish to close your account, please contact us.</p>
</center>
</div>
<div class="item">
<form class="form-horizontal" style="width: 80%; padding-left: 150px;">
<fieldset>
<h4 style="padding-left: 235px;">Applcation Part 1 - Some information about you:</h4>
<div class="form-group">
<label for="inputFN" class="col-lg-2 control-label">First Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputFN" placeholder="First name">
</div>
</div>
<div class="form-group">
<label for="inputLN" class="col-lg-2 control-label">Last Name:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputLN" placeholder="Last name">
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-2 control-label">Email Address:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputEmail" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="inputAge" class="col-lg-2 control-label">Age:</label>
<div class="col-lg-10">
<select class="form-control" id="select">
<option>Select your age</option>
<option>------------------------------------------------------</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputDOB" class="col-lg-2 control-label">Date of birth:</label>
<div class="col-lg-10">
<select class="form-control" id="select1">
<option>Day</option>
<option>------------------------------------------------------</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option>
</select>
</div>
<div class="col-lg-10" style="padding-left: 250px; width: 100%;">
<select class="form-control" id="select2">
<option>Month</option>
<option>------------------------------------------------------</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>12</option>
</select>
</div>
<div class="col-lg-10" style="padding-left: 250px; width: 100%;">
<select class="form-control" id="select3">
<option>Year</option>
<option>------------------------------------------------------</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
</select>
</div>
</div>
<div class="form-group">
<label for="inputSkype" class="col-lg-2 control-label">Skype:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputSkype" placeholder="Skype">
</div>
</div>
<div class="form-group">
<label for="inputMCU" class="col-lg-2 control-label">Minecraft Username:</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="inputMCU" placeholder="Minecraft Username">
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<center>
<a href="#carousel-example-generic" class="right btn btn-primary" style="padding-left: -5px;" data-slide="prev">Last Page</a>
<a href="#carousel-example-generic" class="right btn btn-primary" data-slide="next">Next Page</a>
</center>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$("#carousel").carousel({
pause: false
wrap: false
})
</script>
</body>
</html>
有人可以帮忙解决这个问题吗，因为我不熟悉bootstrap吗？
答案 0 :(得分：1)
这将适用于您正在寻找的东西。按照您的代码结构执行以下步骤。
1.-为旋转木马添加播放和暂停按钮，这样可以更好地控制您要查看或处理的页面。添加它们的最佳方式是在您的上一页和下一页按钮旁边。
<center>
<a href="#carousel-example-generic" class="left btn btn-primary" style="padding-left: -5px;" data-slide="prev">Last Page</a>
<a href="#carousel-example-generic" class="right btn btn-primary" data-slide="next">Next Page</a>
<!-- adding the play and pause button for the carousel using JQuery -->
<div class="btn-group" id="carouselButtons">
<button class="btn btn-danger btn-lg" id="carousel-pause">
<span class="glyphicon glyphicon-pause" aria-hidden="true"></span>
</button>
<button class="btn btn-danger btn-lg" id="carousel-play">
<span class="glyphicon glyphicon-play" aria-hidden="true"></span>
</button>
</div>
2.-添加以下脚本应控制任何帧的开始和停止：
<script>
$('#carousel-play').click(function () {$('#carousel-example- generic').carousel('cycle');});
$('#carousel-pause').click(function (){$('#carousel-example-generic').carousel('pause');});
</script>
答案 1 :(得分：0)
使用此JS代码：
RegistrationIntentService答案 2 :(得分：0)
您可以使用interval: false查看Bootstrap Docs
$('.carousel').carousel({
interval: false
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
<li data-target="#carousel-example-generic" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="//lorempixel.com/1600/900" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="//lorempixel.com/1600/900" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="//lorempixel.com/1600/900" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="//lorempixel.com/1600/900" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>