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

HTML

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

这里有一个我如何做的例子......我也考虑了它随机改变到同一张幻灯片的可能性。

http://www.bootply.com/99052

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

你可以从你的html中移除data-ride="carousel"，这样就可以让旋转木马在没有骑车的情况下进行初始化。

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

1 个答案: