I have multiple images with links. I would like to show 5 of them randomly. I found some script online and modified it. It's a horrible code and sometimes it doesn't always show 5 images.
the html:
<div id="story">
<a href="#1"><img src="http://ift.tt/2rTxfY9" alt=""></a>
<a href="#2"><img src="http://ift.tt/2qVxC7a" alt=""></a>
<a href="#3"><img src="http://ift.tt/2rTNPHz" alt=""></a>
<a href="#4"><img src="http://ift.tt/2qVsIaA" alt=""></a>
<a href="#5"><img src="http://ift.tt/2rTxbrd" alt=""></a>
<a href="#6"><img src="http://ift.tt/2qVwfWm" alt=""></a>
<a href="#7"><img src="http://ift.tt/2rTryJZ" alt=""></a>
<a href="#8"><img src="http://ift.tt/2qVr4FV" alt=""></a>
<a href="#9"><img src="http://ift.tt/2rTBQJV" alt=""></a>
<a href="#10"><img src="http://ift.tt/2qVr7S0" alt=""></a>
<a href="#11"><img src="http://ift.tt/2rTEPlr" alt=""></a>
<a href="#12"><img src="http://ift.tt/2qVpaoD" alt=""></a>
<a href="#13"><img src="http://ift.tt/2rTzV86" alt=""></a>
<a href="#14"><img src="http://ift.tt/2qVNRRL" alt=""></a>
<a href="#15"><img src="http://ift.tt/2rTlrFq" alt=""></a>
<a href="#16"><img src="http://ift.tt/2qVB0im" alt=""></a>
<a href="#17"><img src="http://ift.tt/2rTE6Rw" alt=""></a>
</div>
the js
function randomize() {
var allBanners = $('#story a');
allBanners.hide();
var index = Math.floor(Math.random() * allBanners.length);
allBanners.eq(index).show();
var index2 = Math.floor(Math.random() * allBanners.length - 1);
allBanners.not(allBanners.eq(index)).eq(index2).show();
var index3 = Math.floor(Math.random() * allBanners.length - 1);
allBanners.not(allBanners.eq(index).eq(index2)).eq(index3).show();
var index4 = Math.floor(Math.random() * allBanners.length - 1);
allBanners.not(allBanners.eq(index).eq(index2).eq(index3)).eq(index4).show();
var index5 = Math.floor(Math.random() * allBanners.length - 1);
allBanners.not(allBanners.eq(index).eq(index2).eq(index3).eq(index4)).eq(index5).show();
}
randomize();
jsfiddle: http://ift.tt/2qVFju7
Aucun commentaire:
Enregistrer un commentaire