Как я могу отображать изображения из папки в случайном порядке с помощью JavaScript? - PullRequest
Новая
       23

Как я могу отображать изображения из папки в случайном порядке с помощью JavaScript?

2 голосов
/ 09 июля 2019

То, что я хочу, - это просто отображать новое изображение каждый раз, когда я обновляю страницу, которая сейчас работает, моя проблема заключается в выборе этих изображений, их сотни, как .png, так и .jpg. Печатать каждое изображение по имени или даже переименовывать его кажется невероятно неэффективным, как я могу изменить свой код, чтобы он получал все изображения в папке 'images'?

Код размещен. 

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>✌</title>
  </head>

  <body> <!-- This piece of Javascript will randomly decide an image for your homepage. -->

    <script>
      var pictures = ['images/Aging.png', 'images/Teddy.png', 'images/Socrates.png',];
      var picture = pictures[Math.floor(Math.random() * pictures.length)];
      document.write('<img src="' + picture + '"/>');
    </script>

  </body>
</html>

Ответы [ 2 ]

0 голосов
/ 11 июля 2019

Вы можете использовать алгоритм Fisher-Yates Shuffle, чтобы сделать это, как указано здесь здесь : 

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// Used like so
var arr = ['images/Aging.png', 'images/Teddy.png', 'images/Socrates.png'];
arr = shuffle(arr);
console.log(arr);

Таким образом, вы всегда можете печатать ключи массива в одном и том же порядке, но каждый раз с разными значениями.Надеюсь, это поможет!

0 голосов
/ 09 июля 2019

Скажем, у вас есть 100 изображений.Самое простое действие - переименовать их с идентификатором (скажем, от 1.jpg до 100.jpg) и случайным образом назвать изображение с его именем. 

    function getRandomInt(max) { // number between 1 & max
      return ( Math.floor(Math.random() * Math.floor(max)) )+1;
    }

    let img = document.getElementById("yourImg");
    img.src = getRandomInt(100) +".jpg";

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

Но если веб-сайт создан для локального просмотра,проблема не возникнет.

Редактировать: Вы можете проверить, существует ли ваш файл в js (с помощью вызова ajax), но я думаю, что самое простое, что нужно сделать, - конвертировать все вашиPNG файлы в JPG (или наоборот).Есть несколько классных утилит , которые могут легко конвертировать файлы.

Вы можете использовать mv и индекс для переименования всех ваших *.jpg файлов.

Например, с .txt файлами:

script.sh 

i=1
for name in *.txt; do
        mv $name $i.txt
        i=$((i+1))
done

Вид консоли: 

$> mkdir a
$> cd a
$> touch a.txt
$> touch b.txt
$> touch zerg.txt
$> touch heyy.txt
$> ls
a.txt  b.txt  heyy.txt  script.sh  zrg.txt
$> nano script.sh
$> chmod +x script.sh
$> ./script.sh
$> ls
1.txt  2.txt  3.txt  4.txt  script.sh

Edit2:

Вы должны создать свой путь URL с вашим подкаталогом, вашим произвольным именем и расширением.

Вот немногокод для начала:) 

<img id="test" />
<p id="text"></p>

<script>
    // config, modify your values here :)
    let directory = "img/";
	let nb_of_files = 100;

	function getRandomInt(max) { // number between 1 & max
		return ( Math.floor(Math.random() * Math.floor(max)) )+1;
	}

	let random_int = getRandomInt(100);
	let img = document.getElementById('test');
	img.src = directory + random_int +".jpg";

	document.getElementById('text').innerHTML = "Image choosen is "+ img.src +"";
</script>
...