Twitter的引導旋轉木馬隨機負載5項

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> 

買者：這是未經測試根據自己的需要或如果有正確的 錯誤，所以改變它。

但是，我做了一個jsfiddle使用li元素，而不是圖像 ，因爲我沒有我可以使用的在線圖像。