Javascript 如何创建iFrame的引导旋转木马?
我可以使用引导创建具有如下布局的视频(iframe)旋转木马吗 下面是我当前使用的代码。问题在于:Javascript 如何创建iFrame的引导旋转木马?,javascript,html,css,twitter-bootstrap,Javascript,Html,Css,Twitter Bootstrap,我可以使用引导创建具有如下布局的视频(iframe)旋转木马吗 下面是我当前使用的代码。问题在于: 转盘指示器显示在视频的顶部(使其难以看到),而不是下方 转盘在几秒钟后自动转到下一个视频。相反,我希望旋转木马只有在访客点击旋转木马指示器时才能转到下一个视频 <div id="carouselvideo" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators">
- 转盘指示器显示在视频的顶部(使其难以看到),而不是下方
- 转盘在几秒钟后自动转到下一个视频。相反,我希望旋转木马只有在访客点击旋转木马指示器时才能转到下一个视频
<div id="carouselvideo" class="carousel slide" data-ride="carousel"> <ol class="carousel-indicators"> <li data-target="#carouselvideo" data-slide-to="0" class="active"></li> <li data-target="#carouselvideo" data-slide-to="1"></li> <li data-target="#carouselvideo" data-slide-to="2"></li> </ol> <div class="carousel-inner" role="listbox"> <div class="item active"> <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <div class="item"> <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <div class="item"> <iframe width="250" height="250" src="https://www.youtube-nocookie.com/embed/xxx?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div>
<ol class="carousel-indicators">
<li data-target="#carouselvideo" data-slide-to="0" class="active"></li>
<li data-target="#carouselvideo" data-slide-to="1"></li>
<li data-target="#carouselvideo" data-slide-to="2"></li>
</ol>
从
容器中取出。只要数据目标
指向#carouselvideo
,则ol
可以位于页面上的任何位置
对于JS,您可以将interval
的选项设置为false
$(“#carouselvideo”).carousel({interval:false})代码>谢谢,它工作时只有一个例外。把指示器代码放在旋转木马外面,似乎会引起一些问题:啊,是的。我忘了当控件在外面的时候你需要一点js。不过,看起来你已经弄明白了。