Question

我有一个包含img的div的php文件，img来自我的数据库，这是一个arrary。我想编写一个“Next”btn，所以它循环遍历数组并显示不同的imgs。但我不知道如何使用J.Query和php来做到这一点。 Plz给了一些帮助。 THX

<link href="../css-home/findgoods.css" rel="stylesheet"/>
<script src="../js/home-img.js" type="text/javascript"></script> 

 <?php if(is_array($goodsinfo)):?>

  <div class="container">         
    <div style="display: inline-block;">
       <img class="img-click" src="<?php echo $goodsinfo[$size] - >goods_pic?>"/>
    </div>


  <button id="call_back_btn">Next</button>
    <textarea id="input"></textarea>

    <textarea id="response"></textarea><!--

我想在这里做的是改变我的php中的值$ size，这样我就可以遍历我的$ goodsinfo这是一个数组;一开始我想在我的arrary中显示第一张图片，所以我希望$ size为0，如果按下Next按钮，$ size将变为1，依此类推。我在两个文本框中尝试过，当我单击Next时它会发生变化，但是从ajax返回的$ size似乎没有变化。

$( document ).ready(function(){
$index = 0,
$itemAmt = 6,
  $.post("../js/calculate_array.php", 
    {
        size : $index,
    },
        function(data)
        {
            $('#response').val(data);
            console.log(data);
        }
    );

$('#call_back_btn').click(function()
{
     $index += 1;
      if ($index > itemAmt - 1) {
        $index = 0;
      }
     $.post("../js/calculate_array.php", 
    {

        size : $index,
    },
        function(data)
        {
            $('#response').val(data);
            console.log(data);
        }
    );
    });
});

我的ajax文件。

<?php
  $size = $_POST['size'];
  echo $size;
?>

Answer 1

您可以使用php

将所有图像打印到html

// Array of images names
$images = array('img1.jpg', 'img2.jpg', 'img3.jpg');

// Lets go through array and print every image
for($i = 0; $i < count($images); $i++) {
  // If not first image, set display to "none"
  $display = $i === 0 ? '' : 'style="display:none"';
  echo('<img class="multiple-images" src="'.$images[$i].'" '.$display.'>');
}

因此，只有第一张图像可见，其余部分将被隐藏。接下来创建将显示下一个图像的javascript函数。

// Find all images we want to cycle through
var images = $(".multiple-images");
var next = function() {
  // Find current displayed image with class ".active"
  var current = images.filter(".active");
  // If none image was found, use the first one
  if(current.length == 0) current = images.eq(0);

  // Find next image (element) after the current one
  var next = current.next();
  // If none was found, it means we are currently displaying last image
  // and there isn't any next image, so use the first one
  if(next.length == 0) next = images.eq(0);

  // Remove ".active" class from images
  // Here, we could also remove class only from "current"
  // but just to make sure there isn't multiple images with current
  // class, use this
  images.removeClass("active");

  // Hide currently displayed image
  current.hide();

  // Show next image
  next.addClass("active").show();
}

现在只需将next javascript功能分配给按钮

即可

$(".my-button").click(next);

改进脚本的一些提示：

您可以更新php脚本，这样您就可以将类style分配给第一张图像

active

然后你可以更新你的css，这样除了.active类
如果您想在图像之间实现转换效果，可以将一些参数传递给hide和show函数

使用“下一步”按钮循环浏览

1 个答案: