Convert current animated banner into a nivo slider from bespoke CMS

I've taken over a website that currently has a custom built CMS which we want to keep. The one change we want to make is to the homepage animated banner as it's pretty poor.

It's currently setup so it grabs the images input through the cms and outputs them in an animated banner. I want to keep that functionality but feed the images into a nivo slider instead. I'm a little cautious as to how I go about doing it.

This is the code that's outputting the images into the animated banner (I think!!):

<? if ($page[id] == 1) { ?>
<?
    $i = 0;
    $homebanners = mysql_query("SELECT * FROM banners ORDER BY banner_order ASC");
    while ($banner = mysql_fetch_assoc($homebanners)) {
        if (!$first) { $first = true; $bannerimage = $banner[banner_image]; $bannertext = $banner[banner_text]; $bannerlink = $banner[banner_link]; }

        $javascript .= "bannerimage[$i] = '$banner[banner_image]';
        bannertext[$i] = '".addslashes($banner[banner_text])."';
        bannerlink[$i] = '$banner[banner_link]';
        ";
        $i++;
    }

if ($i > 1) {
?>
<script>

    var curbanner = 0;

    var bannerimage = new Array();
    var bannertext = new Array();
    var bannerlink = new Array();

    <? echo $javascript; ?>

    totalbanners = bannerimage.length;

    function changebanner() {
        curbanner = curbanner + 1;
        if (totalbanners == curbanner) { curbanner = 0; }

        bannerurl = 'banner_images/'+bannerimage[curbanner];

          $('#bannertext').fadeOut('100', function() {
            $("#banner").animate({"height": "0px"}, 350, "linear", 
            function() { 
                $('#banner').css({ 'background-image': 'url('+bann开发者_StackOverflowerurl+')' }).fadeIn('slow');
                $("#banner").animate({"height": "222px"}, 350, "linear", 
                function() {
                    document.getElementById('btext').innerHTML=bannertext[curbanner];
                    document.getElementById('bannerlink').href=bannerlink[curbanner];
                    if (bannerlink[curbanner] == "") { document.getElementById('bannerlink').innerHTML = ''; } else {  document.getElementById('bannerlink').innerHTML = 'Read more...'; }
                    $('#bannertext').fadeIn('100');
                });
            });
          });
    }

    setInterval('changebanner()',10000);
</script><? } ?>

And...

<div id="rightcol" style="height:222px;">
    <div id="banner" style="background-image:url('banner_images/<? echo $bannerimage; ?>')">
        <div id="bannertext">
            <h2 id="btext"><? echo $bannertext; ?></h2>
            <a id="bannerlink" href="<? echo $bannerlink; ?>" class="readmore"><? if ($bannerlink) { ?>Read more...<? } ?></a>
        </div><!-- END bannertext -->
    </div><!-- END banner -->
</div><!-- END rightcol -->

How can I get the image, banner text and banner link into a nivo slider in this format:

<div id="slider" class="nivoSlider">
    <a href="page-link-1"><img src="image-1.jpg" alt="" title="banner-text-1" /></a>
    <a href="page-link-2"><img src="image-2.jpg" alt="" title="banner-text-2" /></a>
    <a href="page-link-3"><img src="image-3.jpg" alt="" title="banner-text-3" /></a>
</div>

The amount of slides inputted through the cms should be infinite.

<?php
if ($page[id] == 1) {

    $i = 0;
    $html = '';

    $homebanners = mysql_query("SELECT * FROM banners ORDER BY banner_order ASC");
    while ($banner = mysql_fetch_assoc($homebanners)) {
        if (!$first) { $first = true; $bannerimage = $banner[banner_image]; $bannertext = $banner[banner_text]; $bannerlink = $banner[banner_link]; }

        $html .= "<a href=\"$bannerlink\"><img src=\"$bannerimage\" alt=\"$bannertext\" title=\"$bannertext\" /></a>";
        $i++;
    }

    if ($i > 1) {
        echo "<div id=\"slider\" class=\"nivoSlider\">";
        echo $html;
        echo "</div>";
    }
}
?>