0

我有以下带有 20 个项目的 Twitter 引导轮播，我怎样才能随机只加载 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>
4

1 回答 1

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张图片都放好。但是，在加载时隐藏它们。然后从 1 到 20 随机选取 5 个数字。然后将这 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>

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

但是，我使用元素而不是图像制作了一个jsfiddleli，因为我没有可以使用的在线图像。

于 2013-10-28T00:05:04.913 回答