基于javascript的幻灯片不起作用

Question

I'm trying to implement a simple javascript/jquery-1.6.2 slideshow (I'm not used to javascript), the problem I have is that the items are all shown and I don't know how to hide them.

here is my PHP/HTML code:

  <?php
  $c = 0;
  // show parts of latest news:
  foreach ($items AS $data) {

    // news image
    $image = './images/'.$data['image'];
    // description
    $part_description = substr(nl2br($data['content']), 0, 120);
    ?>

    <div id="cap_<?php echo $c; ?>" class="cap" >
      <h3><a href="<?php echo WEBSITE.'/news/view?id='.$data['id']; ?>" >
        <?php echo $data['title']; ?></a></h3>

      <table>
        <tr>
          <td>
            <a href="<?php echo WEBSITE.'/news/view?id='.$data['id']; ?>" >
              <img alt="Item image" width="200"
                   src="<?php echo $image; ?>" />
            </a>
          </td>
          <td>
            <strong>By</strong>
            <?php echo $data['author']; ?>
            <br/>
          </td>
        <tr/>
      </table>

      <p>
        <?php echo stripslashes($part_description); ?>
        <a href="<?php echo WEBSITE.'/news/view?id='.$data['id']; ?>" >
          read more
        </a>
      </p>
    </div>
    <?php
    $c++;
  }
  // show links:
  ?>

  <div class="links">
  <?php
  for ($i=0; $i<$k; $i++) {
    ?>
    <a href="javascript:slideShow(<?php echo $i; ?>, <?php echo $k; ?>);" class="link_number" id="link_<?php echo $i; ?>">
      <?php echo $i+1; ?>
    </a>
    <?php
  }
  ?>

And my js function:

function slideShow(id, max) {
  var inputHide = null;
  for (var i=0; i<max; i++) {
    $('#cap_'+id).fadeOut(500);
    inputHide = document.getElementById('cap_'+i);
    document.getElementById('link_'+i).style.backgroundColor = '#999999';
  }
  $('#cap_'+id).fadeIn(500);
  document.getElementById('link_'+id).style.backgroundColor = 'black';
}

I have two questions:

Q1: how can I fix this problem and show only one

Q2: is it better if I use a ready-to-use script like jqueryui?

Answer 1

In terms of your second question, It depends on what you need, and your understanding of JS. If you have a pure JS script, and you understand how and why it works, you can tailor it to your needs more. 'personalise it', if you like. However if your knowledge of JS is limited, then a ready to use script may suit you better.

A good way to learn things is to find a pure JS script somewhere (probably many on here), and use that one, but do your research and use your initiative until you understand how it works. Then you can use it in other projects, change it, use bits of it. That's how I learnt most of my javascript!
I've had some trouble with slideshows recently too, good luck! :)

Answer 2

Q1: this should work: inputHide.style.display = 'none';

Q2: In my opinion, both ways are good