случайные изображения без повторения при нажатии - PullRequest
Новая
       64

случайные изображения без повторения при нажатии

0 голосов
/ 28 сентября 2019

В настоящее время я работаю над этим сайтом, и я сделал случайное изображение, всплывающее при клике, но мой клиент чувствует, что иногда одно изображение повторяется слишком много раз, поэтому они просили меня сделать его случайным, но без повторов.

Это ссылка на веб-сайт: 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>

1 Ответ

0 голосов
/ 28 сентября 2019

Вы можете удалить изображение в массиве после его появления. 

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>
...