CSS Section
<style> *{margin:0;padding:0; }. Container{width:100%;Height:353px;Margin-top:20px; }. Prev{Display:Block;width:50px;Height:50px;background:URL (img/prev.png);position:Absolute; Left:110px;Top:192px;Z-index: -; }. Next{Display:Block;width:50px;Height:50px;background:URL (img/next.png);position:Absolute; Right:110px;Top:192px;Z-index: -; }ul Li{position:Absolute;List-style:None;Display:None; }ul{position:relative;margin:0 Auto;width:1000px;}ul li img{width:100%;}Li.banner1{Display:Block;width:500px; Left:100px;Top:60px;Z-index:2}Li.banner2{Display:Block;width:599px; Left:200px;Top:40px;Z-index:3}Li.banner3{Display:Block;width:500px; Right:100px;Top:60px;Z-index:2}</style>
HTML section
<Divclass= "Container"> <ahref= "Javascrpt:;"class= "Prev"></a> <ahref= "Javascrpt:;"class= "Next"></a> <ul> <Liclass= "Banner1"><imgsrc= "Img/4.png" /></Li> <Liclass= "Banner2"><imgsrc= "Img/1.png" /></Li> <Liclass= "Banner3"><imgsrc= "Img/2.png" /></Li> <Li><imgsrc= "Img/3.png" /></Li> </ul> </Div>
jquery section
<script>//0-1 //1-2 //2-3 //3-0 //0-3 //1-0 //2-1 //3-2 $(function(){ vararr = []; $("Ul>li"). each (function(i,o) {Arr.push ({left:$ (O). Position (). left,top:$ (O). Position (). top,width:$ (o). Width (), zindex:$ (o). CSS ( /c1>"ZIndex")}); }); varIsprev =true; varprev_in = 3; varPrev_out = 2; varNext_out = 0; varnext_in = 3; $(". Prev"). Click (function(){ if(Isprev) {Isprev=false; Arr.push (arr[0]); Arr.shift (); $("Ul>li"). each (function(i,o) {if(i = =prev_out) {$ (O). FadeOut (200,function() {Isprev=true; }); } Else if(i = =prev_in) {$ (O). css ({left:arr[i].left,top:arr[i].top,width:arr[i].width,zindex:arr[i].zindex}). FadeIn ( c6>200); } Else{$ (o). css ({zindex:arr[i].zindex}). Animate ({Left:arr[i].left,top:arr[i].top,width:arr[i].wi DTH},200); } }); Next_out=prev_in; Next_in=prev_out; Prev_in--; Prev_out--; if(Prev_out = =-1) {Prev_out= 3; } if(prev_in = =-1) {prev_in= 3; } } }); varIsnext =true; $(". Next"). Click (function(){ if(isnext) {Isnext=false; Arr.unshift (Arr[arr.length-1]); Arr.pop (); $("Ul>li"). each (function(i,o) {if(i = =next_out) {$ (O). FadeOut (200,function() {Isnext=true; }); } Else if(i = =next_in) {$ (O). css ({left:arr[i].left,top:arr[i].top,width:arr[i].width,zindex:arr[i].zindex}). FadeIn ( c0>200); } Else{$ (o). css ({zindex:arr[i].zindex}). Animate ({Left:arr[i].left,top:arr[i].top,width:arr[i].wi DTH},200); } }); Prev_in=next_out; Prev_out=next_in; Next_out++; Next_in++; if(Next_out = = 4) {Next_out= 0; } if(next_in = = 4) {next_in= 0; } } }); }); </script>
jquery Implements rotation carousel diagram