mercredi 24 mai 2017

multiple random img with href

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