Bootstrap JavaScript轮播不停止循环

前端之家收集整理的这篇文章主要介绍了Bootstrap JavaScript轮播不停止循环前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
Twitter Bootstrap版本:2.0.3

示例HTML代码

  1. <!DOCTYPE html>
  2. <html dir="ltr" lang="en-US" xmlns:og="http://opengraPHProtocol.org/schema/">
  3. <head>
  4. <link rel="stylesheet" type="text/css" media="all" href="reddlec/style.css" />
  5. <script type="text/javascript">
  6. $(document).ready(function() {
  7. $('.carousel').each(function(){
  8. $(this).carousel({
  9. pause: true,interval: false
  10. });
  11. });
  12. });​
  13. </script>
  14. <script src="http://twitter.github.com/bootstrap/assets/js/jquery.js"></script>
  15. <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
  16. <script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-carousel.js"></script>
  17. </head>
  18. <body>
  19. <div id="myCarousel" class="carousel slide">
  20. <!-- Carousel items -->
  21. <div class="carousel-inner">
  22. <div class="active item"></div>
  23. <div class="item"></div>
  24. <div class="item"></div>
  25. </div>
  26. <!-- Carousel nav -->
  27. <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
  28. <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  29. </div>
  30. </body>
  31. </html>

CSS:提供bootstrap.css

问题:如您所见,我已启用了暂停模式,并禁用了自行车。但是当我点击轮播的左侧或右侧控件时,轮播会以默认间隔(每个周期5秒)在鼠标左键开始循环。

如何强制禁用骑车?我想让用户手动循环图像。

您可以在我的测试网站here上测试问题。

解决方法

您可能想尝试删除“暂停”属性。没有必要,如果你不是自动循环的图像。我的假设(我将看看引导代码验证)是,当“mouseleave”事件触发时,循环恢复 – 即使它被关闭在第一位。当它恢复时,它使用默认速度。

这里是一个解决方案:

  1. $(function() {
  2. $('.carousel').each(function(){
  3. $(this).carousel({
  4. interval: false
  5. });
  6. });
  7. });​

猜你在找的Bootstrap相关文章