1

シンプルな javascript/jquery-1.6.2 スライドショーを実装しようとしています (javascript には慣れていません)。問題は、アイテムがすべて表示され、それらを非表示にする方法がわからないことです。

ここに私のPHP/HTMLコードがあります:

  <?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
  }
  ?>

そして私のjs関数：

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';
}

2 つの質問があります。

Q1: この問題を解決して 1 つだけ表示するにはどうすればよいですか

Q2: jqueryui のようなすぐに使えるスクリプトを使用した方が良いですか?

4

2 に答える 2

1

2番目の質問に関しては、必要なものとJSの理解に依存します。純粋な JS スクリプトがあり、それがどのように、なぜ機能するかを理解していれば、さらにニーズに合わせて調整できます。必要に応じて「カスタマイズ」してください。ただし、JS の知識が限られている場合は、すぐに使用できるスクリプトの方が適している場合があります。

物事を学ぶ良い方法は、どこかで純粋な JS スクリプトを見つけて (おそらくここにたくさんあります)、それを使用することです。その後、他のプロジェクトで使用したり、変更したり、その一部を使用したりできます。それが私のjavascriptのほとんどを学んだ方法です！
私も最近スライドショーに問題がありました。頑張ってください! :)

于 2013-08-29T21:55:17.923 に答える
0

Q1:これはうまくいくはずです:inputHide.style.display = 'none';

Q2:どちらも良いと思います

于 2013-08-29T21:42:15.547 に答える