引导程序3转盘-随机选择下一张幻灯片

Bootstrap3 carousel - picking random next slide

本文关键字：一张 幻灯片 3转盘 随机 选择 引导程序      更新时间：2024-04-07

我有点被难住了。：）我是Javascript的新手，但当我在谷歌上搜索时，通常会在网上找到很多很棒的帮助。这次我能想到的最好的帮助是在这里，但医生们说，发布一个新问题比偏离原来的帖子要好。所以，我的问题是：我正在使用Bootstrap3的旋转木马，我试图选择一个随机的开始图像，然后继续使用随机图像。我已经想好了如何选择第一张幻灯片，但不知道如何选择下一张幻灯片。就目前情况来看，它只是在节目中继续循环。

<div id="myCarousel" class="carousel slide" data-wrap="true" data-ride="carousel">
<!-- Slider Content (Wrapper for slides )-->
    <div class="carousel-inner">
        <div class="item">
            <img src="images/slides/AAA.jpg" alt="AAA" />
        </div>
        <div class="item">
            <img src="images/slides/BBB.jpg" alt="BBB" />
        </div>
        <div class="item">
            <img src="images/slides/CCC.jpg" alt="CCC" />
        </div>
        <div class="item">
            <img src="images/slides/DDD.jpg" alt="DDD" />
        </div>
        <div class="active item">
            <img src="images/slides/EEE.jpg" alt="EEE" />
        </div>
    </div>
</div>
<script src="js/bootstrap.js"></script>
<script type='text/javascript'>
     $(document).ready(function() {
         /* Pick a random number and apply it to the first slide in the slideshow item */
         $('.item').eq(Math.floor((Math.random() * $('.item').length))).addClass("active");
         /* Pick random next slide */
         $('#myCarousel').carousel(Math.floor((Math.random() * $('.item').length))));
     });
</script>

谢谢。：）

jQuery 
var currentSlide;
var rand;
$(document).ready(function() {
  currentSlide = Math.floor((Math.random() * $('.item').length));
  rand = currentSlide;
  $('#myCarousel').carousel(currentSlide);
  $('#myCarousel').fadeIn(1000);
  setInterval(function(){ 
    while(rand == currentSlide){
      rand = Math.floor((Math.random() * $('.item').length));
    }
    currentSlide = rand;
    $('#myCarousel').carousel(rand);
  },3000);
});

CSS

#myCarousel {
    display:none;   
}

HTML

<div id="myCarousel" class="carousel slide" data-wrap="true">
....

这里有一个我将如何做的例子…我还考虑了它随机变为同一张幻灯片的可能性。

http://www.bootply.com/99052

然而，您会注意到，根据选择的幻灯片，转盘将向左或向右转换。。引导程序转盘设计用于显示线性图像。可能有一种方法可以使用jQuery操作项目的顺序，使其始终以相同的方式滑动。如果你正在寻找它，它可以完成，但需要一些工作，可能最好在另一个问题中处理。

此外，您可以从html中删除data-ride="carousel"，这将使其在不循环的情况下初始化转盘。

相关文章：