Question

我有以下Twitter引导程序轮播，有20个项目，我怎样才能随机加载5个项目？我找到了另一个隐藏项目的脚本，但由于它是幻灯片显示，这不会起作用。

<div id="myCarousel" class="carousel slide">
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active item"><img src="img/slider/1.jpg"></div>
<div class="item"><img src="img/slider/2.jpg"></div>
<div class="item"><img src="img/slider/3.jpg"></div>
<div class="item"><img src="img/slider/4.jpg"></div>
<div class="item"><img src="img/slider/5.jpg"></div>
</div>
<!-- Carousel nav -->
<a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
<a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
</div></div>

<script type='text/javascript'>
$(document).ready(function() {
    $('.carousel').carousel({
    interval: 8000
    })
    });
   </script>

Answer 1

你可以在这一个上做一些纯JS然后JQuery：

我将展示两种选择。

第一个将产生5个随机数然后使用这些随机数更改src元素的img属性作为旋转木马的图像，如：

<script type='text/javascript'>
 $(document).ready(function() {
 $('.carousel').carousel({
 interval: 8000
 });

 var arr = []; // array for images to display
 while(arr.length<5) // Get random numbers from 1 to 20 up to 5 in length
 {
   var rnd = 1 + Math.floor(Math.random() * 20); // Generate random numbers 1 to 20
   if (arr.indexOf(rnd)<0) // Check if it is not in Array already
   {
      arr.push(rnd); // Add to array if random number not in array
   }
 }

var idx=0; // index for the image to display
$('.carousel img').each(function()
 {
    // change the src in img to randomly generated numbers
    $(this).attr('src','img/slider/'+arr[idx]+'.jpg'); 
    idx++;
 });
</script>

第二个是在加载之前放置所有20个图像。然而，在加载时隐藏它们。然后随机选取5个数字从1到20.然后取消隐藏或显示这5个随机数旋转木马的一部分。如下所示。

<script type='text/javascript'>
 $(document).ready(function() {
 $('.carousel').carousel({
 interval: 8000
 });

 // Hide all img under carousel class
 $('.carousel img').each(function()
 {
   $(this).hide(); 
 });

 var arr = []; // array for images to display
 while(arr.length<5) // Get random numbers from 1 to 20 up to 5 in length
 {
   var rnd = 1 + Math.floor(Math.random() * 20); // Generate random numbers 1 to 20
   if (arr.indexOf(rnd)<0) // Check if it is not in Array already
   {
      arr.push(rnd); // Add to array if random number not in array
   }
 }

var idx=1;
$('.carousel img').each(function()
 {
  if (arr.indexOf(idx)>=0) // if it matches the generated number generated earlier
   {
     $(this).show(); // show the image hidden earlier
    }
  idx++; // increment index
});
</script>

警告：这是未经测试的，因此请根据自己的需要进行更改或更正错误，如果有的话。

但是，我使用li元素代替图片制作了jsfiddle 因为我没有可以使用的在线图像。

Twitter Bootstrap Carousel随机加载5项

1 个答案: