Bootstrap3 轮播 - 随机选择下一张幻灯片

我有点难住了。 :) 我是 Javascript 新手，但当我用 Google 搜索时，通常会在网上找到很多很棒的帮助。这次我能想到的最好的帮助就在这里，但文档说发布一个新问题比偏离原来的帖子更好。所以，这是我的问题：我正在使用 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 http://www.bootply.com/99052

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

您也可以删除data-ride="carousel"从你的 html 中，这将使轮播将在不循环的情况下初始化。