its*_*_me 33 javascript twitter-bootstrap
Twitter Bootstrap版本: 2.0.3
示例HTML代码:
<!DOCTYPE html>
<html dir="ltr" lang="en-US" xmlns:og="http://opengraphprotocol.org/schema/">
<head>
<link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
<script type="text/javascript">
$(document).ready(function() {
$('.carousel').each(function(){
$(this).carousel({
pause: true,
interval: false
});
});
});?
</script>
<script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
</head>
<body>
<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item">…</div>
<div class="item">…</div>
<div class="item">…</div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
</body>
</html>
CSS:随bootstrap.css提供
问题:正如您所看到的,我已启用暂停模式,并禁用骑行.但是,当我单击旋转木马的左侧或右侧控件时,旋转木马会在mouseleave上以默认间隔(每个循环5秒)开始循环.
我如何强行禁用骑行？我希望用户手动循环图像.
您可以在此处测试我的测试网站上的问题.
小智 41
您可能想尝试删除"暂停"属性.如果您没有自动循环显示图像,则没有必要.我的假设(我将查看要验证的引导代码)是当"mouseleave"事件触发时,循环恢复 - 即使它首先被关闭.恢复时,它使用默认速度.
这是一个解决方案:
$(function() {
$('.carousel').each(function(){
$(this).carousel({
interval: false
});
});
});?
小智 35
要禁用循环,一个有效的解决方案是将data-interval ="false"添加到轮播容器中:
<div id="myCarousel" class="carousel slide" data-interval="false">
<div class="carousel-inner">
<div class="active item">toto</div>
<div class="item">tata</div>
<div class="item">tutu</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
</div>
小智 29
我刚刚提出了解决这个问题的方法.以上都没有为我工作,但它确实让我看看引导代码.我相信这个错误的原因是在defaults对象的bootstrap-carousel.js文件中:
$.fn.carousel.defaults = {
interval: 5000
, pause: 'hover'
}
在轮播滑动后,它最终恢复为这些默认值.如果您希望轮播不滑动且仅由用户控制,则可以将默认对象更改为间隔为false.希望这可以帮助.
$.fn.carousel.defaults = {
interval: false
, pause: 'hover'
}
我不知道为什么,但主要解决方案对我来说也不起作用.奇怪的.
为了解决我的问题,我做了以下代码.
$('.carousel').carousel({interval: false});
$(document).on('mouseleave', '.carousel', function() {
$(this).carousel('pause');
});
请参阅carouselpause的文档.
<div id="carousel-example-generic" class="carousel slide" data-wrap="false">
http://getbootstrap.com/javascript/#carousel
| 归档时间： |
|
| 查看次数： |
85161 次 |
| 最近记录： |