Javascript Bootstrap3旋转木马-随机拾取下一张幻灯片

我有点被难住了我是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>

$（文档）.ready（函数（）{
/*选择一个随机数并将其应用于幻灯片放映项目中的第一张幻灯片*/
$（'.item'）.eq（Math.floor（（Math.random（）*$（'.item'）.length））.addClass（“活动”）；
/*随机选取下一张幻灯片*/
$（'#myCarousel'）.carousel（Math.floor（（Math.random（）*$（'.item'）.length））；
});

谢谢。：）

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

HTML

....

这是一个我将如何做的例子。。。我还考虑了随机切换到同一张幻灯片的可能性

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

---

Als您可以从html中删除

data ride=“carousel”

，这将使转盘在不循环的情况下初始化。

Trevor，非常感谢您的代码。：）它非常有用，不仅帮助我理解Java，还让我发现我遇到的问题中有一部分与Joomla有关。@Ben，不客气，我很高兴它对你有用。如果您认为此答案已回答您的问题，请将其标记为已接受。如图所示。非常感谢。更新为任何有兴趣的人！大家好，@Trevor help之后，我将代码导入了我的Joomla站点。在经历了很多麻烦之后，我发现JQuery和Joomla3.2并没有很好地配合。所有典型的修复方法似乎都不适合我。昨天，我偶然发现了这个问题，它给了我一个有效的解决方案。很高兴知道我所要做的就是用（jquery）替换$，代码工作起来很神奇。好东西。对我来说，我看到了很多这样的例子，但都不起作用。“主动”的书写似乎不起作用，或使旋转木马完全消失。但实际上，我只想在页面加载时从我拥有的15个左右的旋转木马项目（不是图像、文本部分）中找到一个随机点，然后旋转木马可以从该点开始拾取并播放。你简单的第一个随机选择脚本非常适合我的需要！现在我终于可以上床睡觉了谢谢

#myCarousel {
    display:none;   
}

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