How to dynamically add images and a link to a carousel?

Question 1

Here is the full working static HTML page with Elastislide carousel to start with

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>

</body>
<ul id="carousel" class="elastislide-list">     
  <li><a href="1.jpg"><img src="1.jpg" alt="img1" /></a></li>
  <li><a href="2.jpg"><img src="2.jpg" alt="img2" /></a></li>
  <li><a href="3.jpg"><img src="3.jpg" alt="img3" /></a></li>
  <li><a href="4.jpg"><img src="4.jpg" alt="img4" /></a></li>
</ul>
<script type="text/javascript">      
  $('#carousel').elastislide();
</script>

<body>
</html>

Notice that file structure is important - for such HTML you must have:
/ filanme.htm (or .php) - the page itself
/ css/* - css files included
/ js/* - javascripts included
/ images/* - Elastislide supplementary images (contained in its package)

To generate such a page with PHP hypertext preprocessor your steps could be like these.

Retrieve PHP data from Joomla CMS (or MySQL database directly) about which images and links site administrator wish to be loaded into the carousel. It's hard for me to say how to do this with Joomla, because I do not use it very often, so I would give an example of simple function, always returning 'precooked' PHP array with data.
After you got data, generate markup of ul and lis that forms carousel source and insert script with $('#carousel').elastislide(); call after it.

Here is simplistic, but working PHP code sample:

<?
// such a funciton would be inside CMS, not in your code
function CMS_get_carousel_data( $carousel_name ) {
  return array(
    array( 'link'=>'1.jpg', 'image'=>'1.jpg', 'alt_text'=>'1' ),
    array( 'link'=>'2.jpg', 'image'=>'2.jpg', 'alt_text'=>'2' ),
    array( 'link'=>'3.jpg', 'image'=>'3.jpg', 'alt_text'=>'3' ),
    array( 'link'=>'4.jpg', 'image'=>'4.jpg', 'alt_text'=>'4' )
  );
}
?>
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="css/elastislide.css" />
  <script type="text/javascript" src="js/jquery.js"></script>
  <script type="text/javascript" src="js/jquerypp.custom.js"></script>
  <script type="text/javascript" src="js/modernizr.custom.17475.js"></script>
  <script type="text/javascript" src="js/jquery.elastislide.js"></script>
<head>
<body>
<?
// calling 'CMS' function to retrieve data to be displayed in the carousel
$data = CMS_get_carousel_data('carousel_A');
?>
</body>
<ul id="carousel_A" class="elastislide-list">
  <? foreach( $data as $item ) { /* generating markup */ ?>
  <li>
    <a href="<?=$item['link']?>">
      <img src="<?=$item['image']?>" alt="<?=$item['alt_text']?>" />
    </a>
  </li>
  <? } ?>
</ul>
<script type="text/javascript">      
  $('#carousel_A').elastislide();
</script>

<body>
</html>

To get this really working you should place the code above in .php file on your site, place other required files to appropriate folders and, of course, find real API in Joomla CMS to retrieve data for carousel and and make use of it.

Question 2

But it's the javascript that decides what gets shown in the html, based on what's available, right ?

There may be Javascript, PHP script or even static HTML markup to 'decide' what gets shown. Calling $('#carousel').elastislide(); you just tell Elastislide plugin to make carousel out of your ul with id="carousel" regarding its current contents. These contents (lis with images and links) may come from any source:

Just reside in static HTML code, like in your second sample
Be generated by PHP or any other server script
Be generated on client side (in viewer's browser) by Javascript code like $('#carousel').append("<li><a href="#"><img src="images/10.jpg" alt="image03" /></a></li>");
If you generate them with JS before calling $('#carousel').elastislide(); you do not have to do anything else.
But if you want to add items to already-formed carousel, after calling var carousel = $('#carousel').elastislide(); - you use the same code to append new li to the carousel source (ul), but after that you must call carousel.add(); to 'inform' Elastislide plugin that you have changed carousel source and so plugin must update its visual representation accordingly.

Addition: Practically, in Joomla you should rather use server-side PHP code to form HTML carousel source (based on some data from that CMS) and on client-side just call $('#carousel').elastislide();.