How to use javascript to automatically transform images

Method: 1. Create an array of image paths; 2. Use timeInterval to define the switching time, and setInterval() to set the time to execute the function regularly; 3. Obtain the img object, set the initial curIndex, and compare the image names with the if statement to achieve continuous Change the image name and then change the image path to achieve a switching effect.

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, Dell G3 computer.

How to use JavaScript to automatically transform images

1. Create a new html file, named test.html, to explain how to use javascript Realize scheduled picture switching.

2. In test.html, use the img tag to create a picture display, and set its id attribute to obj, so that the element object can be obtained below.

3. In the script tag of the test.html page, use new Array() to create an array of image paths and put the file names of the three images in it.

4. In the script tag of the test.html page, use the variable timeInterval to define the image switching time as 1 second, and set it every second through the setInterval() timer method. Execute the changeImg() function once.

5. In the changeImg() function, use the document.getElementById() method to obtain the img object, set an initial curIndex variable, and compare the names of the pictures through the if statement to achieve Keep changing the name of the picture.

Note: The name of the picture must be an ordered number such as 0, 1, 2, etc.

#6. In the changeImg() function, use the image name obtained in the previous step to change the image path of img, and finally achieve regular switching of images.

For more programming related knowledge, please visit: Programming Video! !

The above is the detailed content of How to use javascript to automatically transform images. For more information, please follow other related articles on the PHP Chinese website!