随机图片点击不重复答案

【问题标题】：random images without repeat on click随机图片点击不重复
【发布时间】：2020-01-28 06:42:39
【问题描述】：

目前我在这个网站上工作，我在点击时随机弹出了一张图片，但我的客户觉得有时一张图片重复太多次，所以他们要求我让它随机但不重复。

这是网站链接：http://fullbleed.life/about/（过去的工作部分是它应该工作的地方）

谢谢！

imageString = [
  'http://fullbleed.life/wp-content/uploads/1.png',
  'http://fullbleed.life/wp-content/uploads/2.png',
  'http://fullbleed.life/wp-content/uploads/3.png',
  'http://fullbleed.life/wp-content/uploads/4.png',
  'http://fullbleed.life/wp-content/uploads/5.png',
  'http://fullbleed.life/wp-content/uploads/6.png',
  'http://fullbleed.life/wp-content/uploads/7.png',
  'http://fullbleed.life/wp-content/uploads/8.png',
  'http://fullbleed.life/wp-content/uploads/9.png',
  'http://fullbleed.life/wp-content/uploads/10.png',
]

name = [
  'Nordstrom',
  'Pylon',
  'ASP & Hand',
  'faris',
  'ARA',
  'traceme',
  'Microsoft',
  'Kozha Numbers',
  'Van Der Pop',
  'YFF',
]

function getRandom() {
  var min = 0
  var max = 10
  return Math.floor(Math.random() * max)
}

$('.past-work').bind('click', function(event) {

  var randNum = getRandom()
  var aProduct = document.getElementById('rand-images')
  var image = document.createElement('img')
  image.src = imageString[randNum]
  image.style.display = 'block'
  image.style.position = 'absolute'
  image.style.left = event.clientX - 280 + 'px'
  image.style.top = event.clientY - 280 + 'px'
  aProduct.appendChild(image)

  $(image).draggable()
      event.preventDefault()
})

<body><div class="row">
	<div class="col-md-12 past-work">
		<h1>PAST WORK</h1>
		<h4>(CLICK ANYWHERE, CLICK ANYWHERE AGAIN)</a></h4>
		<div class="picture">
		<div id="rand-images">
		</div>
	</div>
	</div>
	
	
</div>
</body>

【问题讨论】：

当你在imageString 中只有一个图像字符串并且你不想显示图像两次时会发生什么？
嗯，我不太明白...
您是否希望每次用户悬停到具有past-work 类的元素上时显示不同的图像？请为您要解决的特定问题添加更多信息:)
嗨@luchosrock，我正试图让过去的工作部分像现在一样工作（每次点击div时都会弹出一个随机图像），但问题是没错，图像连续重复，我不希望它像那样

标签： javascript html arrays image random

【解决方案1】：

您可以在出现后删除数组中的图像。

imageString = [
  'http://fullbleed.life/wp-content/uploads/1.png',
  'http://fullbleed.life/wp-content/uploads/2.png',
  'http://fullbleed.life/wp-content/uploads/3.png',
  'http://fullbleed.life/wp-content/uploads/4.png',
  'http://fullbleed.life/wp-content/uploads/5.png',
  'http://fullbleed.life/wp-content/uploads/6.png',
  'http://fullbleed.life/wp-content/uploads/7.png',
  'http://fullbleed.life/wp-content/uploads/8.png',
  'http://fullbleed.life/wp-content/uploads/9.png',
  'http://fullbleed.life/wp-content/uploads/10.png',
]

name = [
  'Nordstrom',
  'Pylon',
  'ASP & Hand',
  'faris',
  'ARA',
  'traceme',
  'Microsoft',
  'Kozha Numbers',
  'Van Der Pop',
  'YFF',
]

var aProduct = document.getElementById('rand-images');
var image = document.createElement('img');
var min = 0;
var max = 10;
function getRandom() {
  
  return Math.floor(Math.random() * max)
}

$('.past-work').bind('click', function(event) {
if(max >=min){
  var randNum = getRandom();  
  image.src = imageString[randNum];
  imageString.splice(randNum, 1) ;
  max--; 
  image.style.display = 'block';
  image.style.position = 'absolute';
  image.style.left = event.clientX - 280 + 'px';
  image.style.top = event.clientY - 280 + 'px';
  aProduct.appendChild(image);
}

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
	<div class="col-md-12 past-work">
		<h1>PAST WORK</h1>
		<h4>(CLICK ANYWHERE, CLICK ANYWHERE AGAIN)</a></h4>
		<div class="picture">
		<div id="rand-images">
		</div>
	</div>
	</div>
	
	
</div>

【讨论】：

它不起作用 :(( 可能我写错了？我应该把代码放在哪里？cảmơn bạn nhiều nha！
还是不行……图片现在不显示了