CSS3 implementation of Carousel switching effect

The general idea of implementing the carousel is to switch the infinite elements in a large box, the large box fixed size, outside the box range to hide, and the infinite elements can be any stacking, according to a certain step of the position transformation, has reached the visual area to show the effect we want.

See an example:

HTML code:

1 <Divclass= "Trans_box">2 <DivID= "Transimagebox"class= "Trans_image_box">3     <Divclass= "Trans_image"style= "Width:300px;height:200px;background:blue;">111</Div>4     <Divclass= "Trans_image"style= "width:300px;height:200px;background:red;">222</Div>5     <Divclass= "Trans_image"style= "Width:300px;height:200px;background:orange;">333</Div>6 </Div>7 <DivID= "Transimagetrigger"class= "Trans_image_trigger">8     <ahref= "#1">Picture 1</a> 　 <ahref= "#2">Picture 2</a> 　 <ahref= "#3">Picture 3</a>9 </Div>Ten </Div>

CSS code:

1 . Trans_box{2 width:300px;3 Overflow:Hidden;4}5 . Trans_image_box{6 width:20000px;7 Height:200px;8 -webkit-transition:All 1s ease-in-out;9 -moz-transition:All 1s ease-in-out;Ten -o-transition:All 1s ease-in-out; One transition:All 1s ease-in-out; A} - . Trans_image_box. Trans_image{ - float: Left; the width:200px; -} - . Trans_image_trigger{ - Padding-top:10px; + text-align:Center; -}

JS Code:

1 var$ =function(ID) {2     returndocument.getElementById (ID);3 };4 var$box = $ ("Transimagebox"),5$oTrigger = $ ("Transimagetrigger"). getElementsByTagName ("a"),6$len =$oTrigger. Length;7  for(vari = 0; i < $len; i++) {8$oTrigger [I].onclick =function(){9             varindex = number ( This. Href.replace (/.*#/g, ")) | | 1;Ten$box. Style.marginleft = (1-index) * + "px"; One             return false; A       }; -}

Click to view demo effect

CSS3 implementation of Carousel switching effect