JavaScript implements random display of pictures

JavaScript is a scripting language widely used in web development. One of the functions is to help us display pictures randomly. Randomly displaying images can increase the fun and interactivity of the website, while also providing users with a better visual experience. This article will explore how to implement the function of randomly displaying images in JavaScript.

1. Get the image array

First we need to define an image array in JavaScript, and then add the images that need to be displayed randomly to the array. In this example we will use simple 3 images.

var images = new Array();
images[0] = "image1.jpg";
images[1] = "image2.jpg";
images[2] = "image3.jpg";

2. Write a function

Next, we need to write a function to randomly select pictures. This function will randomly select an image from the image array we defined and display it on the web page.

function displayRandomImage() {
    var randomIndex = Math.floor(Math.random() * images.length);
    var image = document.createElement("img");
    image.src = images[randomIndex];
    document.body.appendChild(image);
}

The first line of code in this function uses the Math.random() method, which returns a random number greater than or equal to 0 and less than 1. We multiply this random number by the length of the image array to get a decimal, and then use the Math.floor() method to round it to an integer. This integer is the index of the image we need to display.

Then create an img element, set the src attribute of the element to the path of a randomly selected image, and then add the element to the web page. This enables the function of randomly displaying pictures.

3. Trigger random display

Finally, we need to trigger the function of randomly displaying images on the web page. To do this, we can bind the function to the click event of a button or link, or trigger the function in the load event of the web page.

window.onload = displayRandomImage;

The above code will automatically call the function that randomly displays images after the web page is loaded. You can also bind it to the click event of a button:

<button onclick="displayRandomImage()">随机显示图片</button>

In this way, when the user clicks the button, the function that randomly displays the picture will be triggered, thereby randomly displaying a picture.

Conclusion

The above is how to use JavaScript to randomly display images. It is simple and easy to understand, does not require a lot of code, and can add some fun and interactivity to the web page. We can customize the image array or change the code to achieve more complex effects. I hope this article helps you achieve what you need.

The above is the detailed content of JavaScript implements random display of pictures. For more information, please follow other related articles on the PHP Chinese website!