Question

我有一个PHP代码，可以获取图像列表，然后以这种方式显示它们：

<?php 
  $query_selfie = "SELECT * FROM selfie ORDER BY RAND() LIMIT 30";
  $stmt_selfie = $dbh->query($query_selfie);
  if($stmt_selfie->rowCount() > 0)
  {
    $i = 0;
    while($dati_selfie = $stmt_selfie->fetch(PDO::FETCH_ASSOC))
    {  $i++;?>

 <a href="profilo?id=<?php echo $dati_selfie['user_id'];?>" id="slf-<?php echo $i;?>" class="thumbnail slf" style="margin-top:10px;margin-bottom:0px !important;margin-left:0px !important;margin-right: 0px !important;border: 0 !important;">
      <img src="show_selfie.php?id=<?php echo $dati_selfie['id'];?>" alt="Immagine profilo" />
 </a>
 <?php } ?>
 <?php } ?>

因此，例如，它会生成30个<img>标记。我想要做的只是显示其中一个，然后显示另一个..问题是传递给显示图像（src属性）的页面的id是随机选择的。有办法做到这一点？

EDIT
我已经添加了slf类，因为页面中有很多缩略图，但只有这些对此问题感兴趣。
我必须只显示查询选择的一个图像，然后在延迟后更改图像。问题是我必须在某处保存图像的id，因为src属性有一个链接，我必须传递图像的id。

Answer 1

将display: none;添加到除第一个样式之外的所有样式。然后添加隐藏的jQuery代码并定期显示它们。

<?php 
  $query_selfie = "SELECT * FROM selfie ORDER BY RAND() LIMIT 30";
  $stmt_selfie = $dbh->query($query_selfie);
  if($stmt_selfie->rowCount() > 0)
  {
    $i = 0;
    $display = '';
    while($dati_selfie = $stmt_selfie->fetch(PDO::FETCH_ASSOC))
    {  
        if ($i > 0) {
            $display = 'display: none;';
        }
        $i++;?>

 <a href="profilo?id=<?php echo $dati_selfie['user_id'];?>" id="slf-<?php echo $i;?>" class="thumbnail slf" style="<?php echo $display; ?> margin-top:10px;margin-bottom:0px !important;margin-left:0px !important;margin-right: 0px !important;border: 0 !important;">
      <img src="show_selfie.php?id=<?php echo $dati_selfie['id'];?>" alt="Immagine profilo" />
 </a>
 <?php } ?>
 <?php } ?>

<script>
$(function() {
    var thumbnails = $("a.slf");
    var thumbcount = thumbnails.length;
    setInterval(function() {
        var current = $("a.slf:visible");
        current.hide();
        var next = (thumbnails.index(current) + 1) % thumbcount;
        thumbnails.eq(next).show();
    }, 2000);
});
</script>

这是一个带静态HTML且没有图像的简单演示：

$(function() {
    var thumbnails = $("a.slf");
    var thumbcount = thumbnails.length;
    setInterval(function() {
        var current = $("a.slf:visible");
        current.hide();
        var next = (thumbnails.index(current) + 1) % thumbcount;
        thumbnails.eq(next).show();
    }, 2000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="http://www.google.com" class="thumbnail slf">
  Image 1
</a>
<a href="http://www.google.com" class="thumbnail slf" style="display: none;">
  Image 2
</a>
<a href="http://www.google.com" class="thumbnail slf" style="display: none;">
  Image 3
</a>
<a href="http://www.google.com" class="thumbnail slf" style="display: none;">
  Image 4
</a>

Answer 2

首先你的方法是如此糟糕:(不要在视图页面内混合数据库查询或逻辑。任何方式你可以使用以下方法（如果我正确理解你的问题）渲染所有图像（在你的情况下30，如你所说并设置所有不可见之后，您可以像下面一样逐个设置。

    <?php 
  $query_selfie = "SELECT * FROM selfie ORDER BY RAND() LIMIT 30";
  $stmt_selfie = $dbh->query($query_selfie);
  if($stmt_selfie->rowCount() > 0)
  {
    $i = 0;
    while($dati_selfie = $stmt_selfie->fetch(PDO::FETCH_ASSOC))
    {  $i++;?>

 <a style="display:none" href="profilo?id=<?php echo $dati_selfie['user_id'];?>" id="slf-<?php echo $i;?>" class="thumbnail" style="margin-top:10px;margin-bottom:0px !important;margin-left:0px !important;margin-right: 0px !important;border: 0 !important;">
      <img src="show_selfie.php?id=<?php echo $dati_selfie['id'];?>" alt="Immagine profilo" />
 </a>
 <?php } ?>
 <?php } ?>

<script type="text/javascript" >
var currentIndex = 0;
$(document).ready(function(){
    setInterval(function(){ 
        $("#parentDiv").children().hide();
        $($("#parentDiv").children()[currentIndex]).show();
        currentIndex++; 
        if( $("#parentDiv").children().length < currentIndex )
        {
            currentIndex = 0;
        }   
    }, 3000);
});
</script>

Answer 3

执行PHP脚本后，你得到类似的东西（我解压缩了CSS）。您需要将display: none添加到每个.thumbnail：

HTML:

<a href="profilo?id=123456" id="slf-0" class="thumbnail">
  <img src="show_selfie.php?id=123456" alt="Immagine profilo" />
</a>
<a href="profilo?id=654321" id="slf-1" class="thumbnail">
  <img src="show_selfie.php?id=654321" alt="Immagine profilo" />
</a>
<a href="profilo?id=101010" id="slf-2" class="thumbnail">
  <img src="show_selfie.php?id=101010" alt="Immagine profilo" />
</a>

CSS:

.thumbnail {
  display: none;
  margin: 10px 0 0 0 !important;
  border: 0 !important;
}

然后你想在一段时间后显示下一张图片：

$(document).ready(function() {
  var $previousElement = $('.thumbnail').first();

  var interval = setInterval(function() {
    var $nextElement = $previous.next();
    if($nextElement.length) {
      $nextElement.show();
      $previousElement.hide();
      $previousElement = $nextElement;
    }
    else {
      clearInterval(interval);
    }
  }, 1000);
});

代码未经测试但我认为你应该明白这一点。

在javascript中延迟后更改图像

3 个答案: