JQuery实现旋转轮播图

<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:100; ???????} ???????.next{ ???????????display: block; ???????????width:50px; ???????????height:50px; ???????????background:url(img/next.png); ???????????position: absolute; ???????????right:110px; ???????????top:192px; ???????????z-index:100; ???????} ???????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>

<div class="container"> ???????<a href="javascrpt:;" class="prev"></a> ???????<a href="javascrpt:;" class="next"></a> ???????<ul> ???????????<li class="banner1"><img src="img/4.png" /></li> ???????????<li class="banner2"><img src="img/1.png" /></li> ???????????<li class="banner3"><img src="img/2.png" /></li> ???????????<li><img src="img/3.png" /></li> ???????</ul> ???</div>

<script> ???????//0-1 ???????//1-2 ???????//2-3 ???????//3-0 ???????//0-3 ???????//1-0 ???????//2-1 ???????//3-2 ???????$(function(){ ???????????var arr = []; ???????????$("ul>li").each(function(i,o){ ???????????????arr.push({left:$(o).position().left,top:$(o).position().top,width:$(o).width(),zIndex:$(o).css("zIndex")}); ???????????}); ???????????var isPrev = true; ???????????var prev_in = 3; ???????????var prev_out = 2; ???????????var next_out = 0; ???????????var next_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(200); ???????????????????????} ???????????????????????else{ ???????????????????????????$(o).css({zIndex:arr[i].zIndex}).animate({left:arr[i].left,top:arr[i].top,width:arr[i].width},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; ???????????????????} ???????????????} ???????????}); ???????????var isNext = 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(200); ???????????????????????} ???????????????????????else{ ???????????????????????????$(o).css({zIndex:arr[i].zIndex}).animate({left:arr[i].left,top:arr[i].top,width:arr[i].width},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>