<< back to code examples

Random Display from Array (JS)

This script randomly sorts an array of numbers and pulls these values to be used as image index on each loop.


    setTimeout(function(){

        function rand(){
          return (Math.round(Math.random())-0.5);
        }

        var c_array = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
        c_array.sort( rand );

        var x = 0;

        var loop = setInterval(function(){

            $('.slideshow img:eq(' + c_array[x] + ')')
            .css('visibility','visible').hide().fadeIn();
                console.log(x);
                x++;

            if (x > c_array.length) {

                clearInterval(loop);

            } //close if
        
        }, 200); //close interval

    }, 7000); //close setTimeout

html

   <div class="slideshow">

        <img src="images/img1.jpg" />
        <img src="images/img2.jpg" />
        <img src="images/img3.jpg" />
        <img src="images/img4.jpg" />
        <img src="images/img5.jpg" />
        <img src="images/img6.jpg" />
        <img src="images/img7.jpg" />
        <img src="images/img8.jpg" />
        <img src="images/img9.jpg" />
        <img src="images/img10.jpg" />
        
    </div>

css


.slideshow img {
     width: 150px;
     height: 150px;
     float: left;
     visibility: hidden;
}

More Code Projects