CSS3-----Picture Page Turn effect display

In the process of developing a Web site a variety of page effects are countless, here I will introduce a simple method is to use the rotation of CSS3 to achieve this common effect;

The display results are as follows:

The first is the layout of the page, not so complicated;

The href attribute of a tag, which generally points to a URL address, can also be called JavaScript, such as href= "javascript:xxx ();", but this is recommended in the documentation <a href= "http:// Www.111cn.net/zhongxing/U880/javascript:void (0) "onclick=" xxx (); " >xx</a> But this method sometimes produces strange problems in complex environments, try not to use the Javescript: protocol as the HREF attribute, which not only leads to unnecessary triggering of window.onbeforeunload events. In IE, the animated GIF picture will stop playing.

The linked onclick event is executed first, followed by the action under the Herf property, and if you do not want to perform the action under the HREF attribute, the onclick needs to be returned, generally written as: onclick= "xxx (); return false;".

The href attribute of the A tag and the priority level of the OnClick event:

(1) Order: IE 6:href trigger after the onclick, other browsers trigger the Onlick after the first trigger href

(2) href= "javascript:xxx ()" cannot pass in this as a parameter, The onclick can, for example: <a href= "Javascript:alert (' href event ');" onclick= "clickevent (this);" >

(3) The priority trigger method if the return false causes the latter event to not be triggered, for example: <a href= "Javascript:alert (' href event ');" onclick= "clickevent (this); return false; " >

(4) <a href= "#" > will cause the page to be anchored to the bookmark location

(5) for reasons of 1 and 4, <a href= "#" and "IE6" at the same time because the page was re-loaded by the HREF first, causing the onclick event to be discarded by the browser

Summarize:

(1) When a method that does not need to pass in this as a parameter, it is recommended to use only href= "JavaScript:"

(2) If you need to use this parameter, it is recommended to use <a href= "javascript:void (0);" onclick= "dosomthing (This)" >

There is no need to pass this as the method parameter, so I use: Javascript:next (), and the picture to switch the JS is as follows;

In the picture to flip, we need to make a judgment, if not added to the judgment will make carindex more than or less than the number of pictures;

CSS3-----Picture Page Turn effect display