Bootstrap3轮播-随机挑选下一张幻灯片 [英] Bootstrap3 carousel - picking random next slide

问题描述

我有点困惑。 :)我是Java语言的新手，但是当我使用Google搜索时，通常会在网上找到很多帮助。这次我能提供的最好的帮助是在这里，但是文档们说，发一个新问题要比回避原始问题更好。所以，这是我的问题：我正在使用Bootstrap3的轮播，我试图选择一个随机的起始图像，然后再继续选择随机图像。我已经找到了如何挑选第一张幻灯片的方法，但是还没有找到如何挑选下一张幻灯片的方法。按现状显示，它只是继续在整个节目中循环播放。

I'm kind of stumped. :) I'm new to Javascript, but have typically found lots of great help on the net when I Googled. The best help I could come up with this time was here, but the docs said it was better to post a new question than sidetrack the original post. So, here's my question: I'm using Bootstrap3's carousel I'm trying to pick a random starting image, and then continue with random images after that. I've figured out how to pick the first slide, but can't figure out how to pick the next slide. As it stands, it just continues to cycle through the show.

<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">
....

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

Well here is an example of how I would do it... I also accounted for the possibility of it randomly changing to the same slide.

http://www.bootply.com/99052

但是您会注意到，根据选择的幻灯片，轮播会过渡左侧或右侧。自举轮播旨在显示线性图像。可能存在一种使用jQuery操作项目顺序的方法，以便它始终以相同的方式滑动。如果您正在寻找可以解决的方法，但是需要一些工作，最好在另一个问题中解决。

You will notice however that depending on which slide is chosen the carousel will transition either left or right.. The bootstrap carousel was designed to display linear images. There may be a way to manipulate the order of the items using jQuery so that it always slides the same way. If you are looking for that it could be done but would take some work and would probably be best handled in another question.

还可以从HTML中删除 data-ride = carousel ，这样轮播会初始化而无需循环。

Als you can remove the data-ride="carousel" from you html and that will make it so the carousel will initialize without cycling.

这篇关于Bootstrap3轮播-随机挑选下一张幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！