Easy to implement JavaScript image switching _javascript tips

This article examples for you to introduce JavaScript image switching implementation methods, share for everyone to reference, the specific content as follows

Effect Chart:

Web page to see a very common picture switching effect: Taobao, JD and other shopping, the introduction of the product will have more than one picture, is generally displayed, the bottom of a row of small pictures, the mouse into small pictures on the big picture will switch. Refer to Vivo x5m mobile 4G mobile phone. The following is a recording of the implementation process.

1. getElementById ()

This method is a very common method of manipulating DOM, such as having a P tag, the ID is set to PID, and the element can be manipulated by getElementById ("pid").

<! DOCTYPE html>
 
 

In the code above, a P tag is written in the body, the ID is PID, the onmouseover event is triggered when the mouse is positioned over the p tag, and the Changetext () method is executed to change the document within the P tag.

2. setattribute () and getattribute ()

The GetAttribute () method is used to get the value of a property, and the SetAttribute () method is used to assign a value to a property.

<! DOCTYPE html>
 
 

In the code above, there is a tag in the body that gets a label via getElementById (), and the value of Baiduurl.getattribute ("href") is the default href attribute, through Baiduurl.setattribute (" href "," http://www.taobao.com ") setting, the property value changes. Full code:

<! DOCTYPE html>  

Next Learn how to achieve local amplification, we have any good method? can be explored together.