0

次の 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>
4

1 に答える 1

1

いくつかの純粋な操作を実行してから、次の操作を実行できJSますJQuery。

2つのオプションを示します。

最初のものは 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>

2 つ目は、ロードする前に 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>

警告: これはテストされていないため、必要に応じて変更するか、エラーがあれば修正してください。

ただし、使用できるオンライン画像がないため、画像の代わりに要素を使用してjsfiddleを作成しました。li

于 2013-10-28T00:05:04.913 に答える