Question

因此，我需要在网站上显示2或3个不同的图像，作为内容的简单视差分割器。

我有一个包含4个图像的数组，因此我可以在同一页面中随机化而不重复它们，但随机性不会那么明显。

我已经潜伏了一段时间，并找到了这些

Random Image Display, Without Repeat, with Javascript

<script language="javascript">
    var imagesArray = [
        'images/img-1.jpg',
        'images/img-2.jpg',
        'images/img-3.jpg',
        'images/img-4.jpg',
        'images/img-5.jpg',
    ];

    var usedImages = {};
    var usedImagesCount = 0;

    function displayImage() {

        var num = Math.floor(Math.random() * (imagesArray.length));
        if (!usedImages[num]) {
            document.canvas.src = imagesArray[num];
            usedImages[num] = true;
            usedImagesCount++;
            if (usedImagesCount === imagesArray.length) {
                usedImagesCount = 0;
                usedImages = {};
            }
        } else {
            displayImage();
        }
    }
</script>

（这是为了在点击按钮时显示图像，如下所示

<input onclick="displayImage();" type=button value="Click Here">

我试图根据我的需要调整它，但是我的页面上的调用不会产生任何结果）

https://www.daniweb.com/programming/web-development/threads/266181/random-imageslinks-without-repeating

（这个，我不太明白为什么，但我无法应用解决方案。不确定这是代码还是调用图像的方式是错误的......）

http://www.utopiamechanicus.com/article/not-so-random-image-rotation-in-php-for-html-the-sequel/

<?php
    // rotate images randomly but w/o dups on same page - format:
    // <img src='rotate.php?i=0'> - rotate image #0 - use 'i=1'
    // for second, etc
    // (c) 2004 David Pankhurst - use freely, but please leave in my credit
    $images = array(// list of files to rotate - add as needed
        "img1.gif",
        "img2.gif",
        "img3.gif",
        "img4.gif",
        "img5.gif");
    $total = count($images);
    $secondsFixed = 10; // seconds to keep list the same
    $seedValue = (int) (time() / $secondsFixed);
    srand($seedValue);
    for ($i = 0; $i < $total;  ++$i) { // shuffle list 'randomly'
        $r = rand(0, $total - 1);
        $temp = $images[$i];
        $images[$i] = $images[$r];
        $images[$r] = $temp;
    }
    $index = (int) ($_GET['i']); // image index passed in
    $i = $index % $total; // make sure index always in bounds
    $file = $images[$i];
    header("Location: $file"); // and pass file reference back
?>

（这个应该通过以下方式调用：

<img src='mysite.com/rotate.php?i=0'>

但有时候图像仍然在重复）

他们没有为我工作，所以我决定开始一个新主题，因为我真的是新手（实际上，我根本不知道什么都不写）在javascript，并且无法弄清楚是什么最好的方法。我知道这将是随机化项目，为每个项目分配一个位置（一个数字，一个字符，一个[i]等），然后在我的php页面中调用它。你能帮助我吗？

Answer 1

不确定是否是您想要的，但这会在页面上为您提供随机图像（不重复），每次都有不同的图像：

<?php
    $img = array('img1.png', 'img2.png', 'img3.png', 'img4.png', 'img5.png', 'img6.png');
    shuffle($img);
    for($i=0; $i<3; $i++){
        print '<img src="'.$img[$i].'"><br>';
    }
?>

如果您希望每次通话接收一个图像，可能的解决方案之一是使用会话：

<强> image.php：

<?php
    session_start();
    function getImage() {
        $img = array('img1.png', 'img2.png', 'img3.png', 'img4.png', 'img5.png');
        shuffle($img);
        foreach($img as $key => $val) {
            if (!is_array($_SESSION['img'])) {
                return $val;
            } elseif (count($_SESSION['img']) >= count($img)) {
                $_SESSION['img'] = array();
            }
            if (is_array($_SESSION['img']) && !in_array($val, $_SESSION['img'])) {
                return $val;
            }
        }
    }
?>

<强> page.php文件：

<?php
    include 'image.php';
    for ($i = 0; $i < 3; $i++) {
        $currImg = getImage();
        $_SESSION['img'][] = $currImg;
        echo $currImg . '<br>';
    }
?>

所有显示的图像都存储在SESSION变量中。显示所有图像时，此SESSION var将重置并开始新的循环。

每页多个随机图像，无需重复

1 个答案: