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

Question

我有点难过.:)我是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>

谢谢.:)

Answer 1

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;   
}

超文本标记语言

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

这是我如何做到这一点的一个例子......我还考虑了它随机更改为同一张幻灯片的可能性。

http://www.bootply.com/99052

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

另外，您可以从 html 中删除data-ride="carousel"，这样轮播就会在不循环的情况下初始化。