The native JS+CSS3 realizes the picture automatic switching, the picture carousel __js

using css3transition and opacity attributes to make picture -Carousel Animation

Oneself these two days according to use JS to control trigger CSS3 transition attribute, write to CSS3 animation as the basis, JS control process of picture carousel

Using the opacity transparency attribute of CSS3 and transition animation over property, the process is controlled by JS, and the trigger of JS to CSS3 transition animation is realized.

Instance link Address: http://pspgbhu.github.io/opacity

Today suddenly found that this code has problems, mainly in the html/css, the problem is mainly because of the use of Position:absolute positioning, while banner this div and no other elements, so this div can not be properly stretched, for our page layout has brought trouble.
The second problem is that this carousel is mainly intended for the huge banner ads at the top of the page, but it doesn't take into account the effects of different resolutions when writing code, so there's plenty of room for improvement.

Think about it or do not delete the code before the problem, the correct code on the last side

This is the previously problematic code:

<! DOCTYPE html>  
The following 
  is the modified code:  
 

<! 
        DOCTYPE html>