Jquery滑块 - 无法填充滑块中的所有方块

时间:2013-11-24 22:21:18

标签: javascript php jquery html css

我的问题是我不知道如何将数据库中的帖子(文章)与滑块连接起来。我的意思是我用第一个做到了,但我不知道如何与其他人一起做。

这是内容php文件的代码,其中是滑块: 我希望有人可以告诉我如何填补其他4个滑动方块。

<div id="main_content">


<?php
include("includes/connect.php");

$select_posts= "select * from posts order by rand() LIMIT 0,1";

$run_posts = mysql_query($select_posts);

while($row=mysql_fetch_array($run_posts)) {

$post_id = $row['post_id'];
$post_title = $row['post_title'];
$post_date = $row['post_date'];
$post_author = $row['post_author'];
$post_image = $row['post_image'];
$post_content = substr($row['post_content'],0,50);



?>


<div class="wrapper">
  <div class="container">
    <div class="content">
      <div id="featured_slide">
        <ul id="featurednews">
          <li><center><img src="images/<?php echo $post_image; ?>" width="500" height="300"  /></center>
            <div class="panel-overlay">
              <h2><?php echo $post_title; ?></h2>
              <p align="justify"><?php echo $post_content; ?></p><br/>
              <a href="pages.php">Continue Reading &raquo;</a>
              </li>
          <li><img src="images1/demo/2.gif" alt="" />
            <div class="panel-overlay">
              <h2><?php echo $post_title; ?></h2>
              <p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet.<br />
                <a href="#">Continue Reading &raquo;</a></p>
            </div>
          </li>
          <li><img src="images1/demo/3.gif" alt="" />
            <div class="panel-overlay">
              <h2>Dapiensociis temper donec</h2>
              <p>Temperinte interdum sempus odio urna eget curabitur semper convallis nunc laoreet.<br />
                <a href="#">Continue Reading &raquo;</a></p>
            </div>
          </li>
          <li><img src="images1/demo/4.gif" alt="" />
            <div class="panel-overlay">
              <h2>Semvelit nonummy odio tempus</h2>
              <p>Justolacus eger at pede felit in dictum sempus elit curabitur ipsum. Ametpellentum.<br />
                <a href="#">Continue Reading &raquo;</a></p>
            </div>
          </li>
          <li><img src="images1/demo/5.gif" alt="" />
            <div class="panel-overlay">
              <h2>Pedefamet orci orci quisque</h2>
              <p>Nonnam aenenasce morbi liberos malesuada risus id donec volutpat estibulum curabitae.<br />
                <a href="#">Continue Reading &raquo;</a></p>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <?php } ?>

</div> 

1 个答案:

答案 0 :(得分:0)

有一件事你没有关闭第一张幻灯片的'panel-overlay'div或id为'featured_slide'的div,这可能是其他幻灯片没有显示的原因。

另外,根据我对你要做的事情的理解,一旦你修复了上面提到的错误,看起来你需要重新安排你的代码看起来更像是这样:

<div id="main_content">
<div class="wrapper">
  <div class="container">
    <div class="content">
      <div id="featured_slide">
        <ul id="featurednews">

<?php
include("includes/connect.php");

$select_posts= "select * from posts order by rand() LIMIT 0,1";

$run_posts = mysql_query($select_posts);

while($row=mysql_fetch_array($run_posts)) {

$post_id = $row['post_id'];
$post_title = $row['post_title'];
$post_date = $row['post_date'];
$post_author = $row['post_author'];
$post_image = $row['post_image'];
$post_content = substr($row['post_content'],0,50);
?>
          <li><center><img src="images/<?php echo $post_image; ?>" width="500" height="300"  /></center>
            <div class="panel-overlay">
              <h2><?php echo $post_title; ?></h2>
              <p align="justify"><?php echo $post_content; ?></p><br/>
              <a href="pages.php">Continue Reading &raquo;</a>
              </div>
              </li>   
    <?php } ?>
     </ul>
        </div>
      </div>
    </div>
</div>