загрузить 1 случайное изображение (возможно, 10 изображений) в теге 1 div - PullRequest
Новая
       93

загрузить 1 случайное изображение (возможно, 10 изображений) в теге 1 div

0 голосов
/ 05 ноября 2018

Я не настоящий программист и мне нужна помощь. Мне нужен скрипт, который вставляет тег div и внутри этого тега div происходит случайная загрузка изображения (из списка 10), когда страница загружается из внешнего файла js.

Я искал и искал и пробовал разные способы, но мне действительно нужна помощь.

Спасибо

Ответы [ 2 ]

0 голосов
/ 06 ноября 2018

Просто хотел добавить ванильный ответ JS. 

<style>
    #show-picture {
        display: block; 
        margin: 20px; 
        height: 400px; 
        width: 400px; 
        box-shadow: 0 0 12px rgba(0,0,0,0.25);
        background-size: cover; 
        background-position: center; 
    }
</style>

<div id="show-picture"></div>

<script>
    const images = [
        'https://picsum.photos/400/400?image=600',
        'https://picsum.photos/400/400?image=601',
        'https://picsum.photos/400/400?image=602',
        'https://picsum.photos/400/400?image=603',
        'https://picsum.photos/400/400?image=604',
        'https://picsum.photos/400/400?image=605',
        'https://picsum.photos/400/400?image=606',
        'https://picsum.photos/400/400?image=607',
        'https://picsum.photos/400/400?image=608',
        'https://picsum.photos/400/400?image=609',
    ]

    // get random image
    const random_number = Math.floor(Math.random() * images.length); 
    const image = images[random_number]; 

    // get div and set background-image CSS to be our random image
    const show_picture = document.getElementById('show-picture');
    show_picture.style.backgroundImage = `url(${image})`; 
</script>
0 голосов
/ 05 ноября 2018

В приведенном ниже решении используется jQuery, но без него можно просто обойтись 

$(document).ready(function() {

  function randomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
  }

  var imageUrls = [
    "https://www.gstatic.com/webp/gallery3/1.sm.png",
    "https://www.gstatic.com/webp/gallery3/2.sm.png",
    "https://www.gstatic.com/webp/gallery3/3.sm.png"
  ];

  var randomImage = imageUrls[randomInt(0, imageUrls.length - 1)];

  $(".container").append("<img alt='" + randomImage + "' src='" + randomImage + "'</>");


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
</div>

Обновление - тот же ответ внутри полной действительной HTML-страницы 

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
    </script>    
    <script type="text/javascript">


        /**
        * Loads a random number
        */
        function randomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }

        // List of urls
        var imageUrls = [
            "https://www.gstatic.com/webp/gallery3/1.sm.png",
            "https://www.gstatic.com/webp/gallery3/2.sm.png",
            "https://www.gstatic.com/webp/gallery3/3.sm.png"
        ];

        function loadRandomImage() {
            var randomImage = imageUrls[randomInt(0, imageUrls.length - 1)];
            $(".container").append(
                    "<img alt='" + randomImage + "' src='" + randomImage + "'</>");
        }

        // This function executes when the DOM is ready, 
        // e.g., when the entire page is loaded
        $(document).ready(function() {
            loadRandomImage()
        });
    </script>
</head>
<body>
    <div class="container">
    </div>
</body>
</html>
...