每页多个随机图像，无重复 [英] Multiple random images per page, without repeat
问题描述
因此，我需要在网站上显示2到3张不同的图像，作为内容的简单视差分隔器.
So, I need to display 2 or 3 different images in a website, as simple parallax dividers for content.
我有一个由4张图像组成的数组，因此我可以在同一页面上不重复而进行随机化，尽管随机性不会那么明显.
I have an array of 4 images, so I'll be able to randomize without repeat them in the same page, althoug the random won't be that noticeable.
我已经潜伏了一段时间，找到了这些
I've been lurking this for a while, and found these
<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>
(创建该图片是为了在单击按钮时显示图像，如下所示
(this was created to exhibit the image upon a click on a button, as it follows
<input onclick="displayImage();" type=button value="Click Here">
我试图使其适应我的需要，但页面上的调用未产生任何结果)
I tried to adapt it to my need, but the call on my page din't produce any results)
(这一步，我不太清楚为什么，但是我无法应用该解决方案.不确定是代码还是错误的调用图像的方式...)
(this one, I couldn't quite understand why, but I wasn't able to apply the solution. not sure if it's the code or the way of calling the image that's wrong...)
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
?>
(这个应该可以通过以下方式致电:
(this one was supposed to work calling through:
<img src='mysite.com/rotate.php?i=0'>
但是图像有时仍在重复自身)
but the images are still repeating themselves sometimes)
他们对我没有用，所以我决定开始一个新话题，因为我真的是javascript新手(实际上，我一点也不写)，并且不知道这是什么.最好的方法.我知道这就像随机分配项目，为每个项目分配一个位置(数字，字符，[i]等)，然后在我的php页面中调用它.你们能帮我吗?
They didn't work for me, so I decided to start a new topic, because I'm really newbie (actually, I don't know writing nothing at all) at javascript, and can't figure out what's the best approach. I understood it would be something like randomize the items, assign each of them a position (a number, a character, a [i], etc), and then call for it in my php page. Could you guys please help me?
推荐答案
不确定是否要这样做，但这会在页面上每次出现不同图像时为您提供随机图像(无重复):
Not sure is that you want but this will give you randomized images (without repeat) on a page, every time different ones:
<?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>';
}
?>
如果您希望在每次通话中接收一张图像，则可能的解决方案之一是使用会话:
If you want to receive one image per call, one of the possible solutions is to use session:
image.php:
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:
page.php:
<?php
include 'image.php';
for ($i = 0; $i < 3; $i++) {
$currImg = getImage();
$_SESSION['img'][] = $currImg;
echo $currImg . '<br>';
}
?>
所有显示的图像都存储在SESSION变量中.当显示所有图像时，此SESSION变量将重置，并将开始一个新的循环.
All displayed images are stored into SESSION variable. When all images are displayed, this SESSION var is reset and will start a new cycle.
这篇关于每页多个随机图像，无重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
