Today when I was encapsulating the image carousel plug-in, I came up with this little thought of opacity.
My idea of this carousel is not the previous Baidu input judge network setting the outer container overflow to hidden, position to relative, use setInterval to define a cycle time, and then change the top value according to the height of the picture.
Instead, use opacity to switch the display of the corresponding image.
Let’s talk about the compatibility issue of this opacity first
Css code
We know that you still need to render the index (the corner mark in the right or left corner, as for clicking to switch or moving the mouse to switch this, you design) when designing the carousel, as long as the correspondence is met---- Every time the carousel is switched, the index of cur will be compared and it will be ok. (I personally recommend giving clearTimeout to restart the calculation after clicking or moving the mouse )
1. If you have consulted the w3c documentation you will know (for IE only),
filter attribute allows us to add style effects to text and images (ps: Note the use of filter attribute , please always specify the width of the element )
Someone else has written before that when setting opacity in IE6 and IE7, this element must be "layout" (meaning that the width is set and the width is strictly Position)
2. -moz-opacity: attribute is for compatibility with earlier versions of Mozilla. It is said that FF0.9 no longer requires the use of this attribute. My ff 3.6.23 has directly displayed the opacity attribute
3. Some people may also think of this -khtml-opacity attribute, here I am It is not added because it is said that it will be added when Safari 1.x needs to be compatible.
A brief introduction to opacity.
The plug-in is done, but I have left a problem. When many people encapsulate the plug-in, it is like a page with only one DOM. matrix. Is everything rendered? Or to increase the outline or flesh of the mother body, the script only operates and controls it. . . . . . .
Post a compatible picture: