Sliderndescription2

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
    <?php
        //here's ur gonna get the images/descriptions like
        $div = array(
            "images" => array(
                0 => "http://image.naldzgraphics.net/2012/09/15-the-abstract.jpg",
                1 => "http://www.inspirationmix.com/wp-content/uploads/2010/11/abstract-colorful-background-green-2.jpg",
                2 => "http://www.kkuodesign.com/wordpress/wp-content/uploads/2010/07/iphone-wallpaper-abstract-design-71.png",
                3 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-55.jpg",
                4 => "http://cdn.instantshift.com/wp-content/uploads/2012/10/abstract-and-light-effect-tutorials-21.jpg"
            ),
            "descriptions" => array(
                0 => "Desc1",
                1 => "Desc2",
                2 => "Desc3",
                3 => "Desc4",
                4 => "Desc5"
            )
        );

        // So u've gotta make a javascript code. I don't know how to make
        // the entire code with javascript so i'm gonna use jquery :)
    ?>
    $(document).ready(function (){
        var numberOfImages = <?php echo count($div['images']); ?>;
        var actualNumber = 0;
        function sortImages(){
            var randomNumber = Math.floor((Math.random() * numberOfImages)); //this will get a random number from 0 -> numberOfImages - 1
            //alert(randomNumber);
            $("#image"+actualNumber).hide();
            $("#desc"+actualNumber).hide();
            $("#image"+randomNumber).show();
            $("#desc"+randomNumber).show();
            actualNumber = randomNumber;
        }
        setInterval(function (){sortImages()}, 5000); // the background will change every 5 seconds.
    });
</script>
<style type="text/css">
    #slider{
        width:500px;
        height:300px;
        margin:auto;
        background-color:black;
    }
    #sliderDescription{
        width:500px;
        margin:auto;
        text-align:center;
    }
</style>
</head>
<body>
    <div id="slider">
        <?php
            // Showing images with display : none; but the 1st.
            for($i = 0; $i < count($div["images"]); $i++){
                echo "<img id = \"image$i\" ";
                if ($i != 0) echo "style = \" display:none; \" ";
                echo "src = \"".$div["images"][$i]."\" ";
                echo "/>";
            }
        ?>
    </div>
    <p id="sliderDescription">
        <?php
            // Showing descriptions with display : none; but the 1st.
            for($i = 0; $i < count($div["descriptions"]); $i++){
                echo "<span id = \"desc$i\" ";
                if ($i != 0) echo "style = \" display:none; \" ";
                echo ">".$div["descriptions"][$i]."";
                echo "</span>";
            }
        ?>
    </p>
</body>
</html>