JQuery实现旋转轮播图
css部分
<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>
html部分
<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>
JQuery部分
<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>