jquery实现DIV翻页的效果

Question

有一个这种需求：点击页面上div1的某个超链接，生成一个div2，div2以翻页的方式展现出来~~覆盖在原先div1的位置上！！！这种要怎么实现？？？？jquery

Answer 1

<style>
.list{
margin:100px;
width:210px;
height:210px;
position:relative;
overflow:hidden;
}
.list div{
 border:1px solid #ccc;
 width:200px;
 height:200px;
background:#fff;
position: absolute;
}
 

</style>

<div class="list">
<div class="act" >1111 <a href="javascript:;" >next</a>  </div>
  <div>2222  <a href="javascript:;" >next</a> </div>
  <div>333  <a href="javascript:;" >next</a> </div>
</div>
 
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>


<script>
$(function(){
 var ds= $('.list div'),L=ds.length,ii=1;
 $('.list  a').click(function(){
var el=$(this).parent('div');
var n=  $(ds[(el.index()+1)%L]) ;
n.css( {left: 100,zIndex:ii++} ).animate({left:0},400)
 
});

})

</script>

Answer 2

谢谢~差不多就是这个效果！！！但是有了一个next的效果，pre的效果要怎么写？？？jquery不是很熟

Answer 3

谢谢~差不多就是这个效果！！！但是有了一个next的效果，pre的效果要怎么写？？？jquery不是很熟觉得你可以看看smart wizard 插件，

Answer 4

把 上一页，下一面 按钮 独立出来
 
<style>
.list{
margin:100px 0 0 100px;
width:210px;
height:210px;
position:relative;
overflow:hidden;
}
.list div{
 border:1px solid #ccc;
 width:200px;
 height:200px;
background:#fff;
position: absolute;
}
.list .act{
z-index:9;
}
 

</style>

<div class="list" id="listBox1" >
<div class="act" >1111    </div>
  <div>2222      </div>
  <div>333   </div>
</div>
  <div >
    <a href="javascript:;" id="bntPrev" class="list_bnt" >prev</a> 
    <a href="javascript:;"  id="bntNext"  class="list_bnt" >next</a> 
  </div>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script> <script>
$(function(){
 var ds= $('.list div'),L=ds.length,i=0, W=$('.list').width();
 $('.list_bnt').click(function(){
var el= $(ds[ i]),next= this.id=='bntNext';
var n=  $(ds[ i=(  i+( next?1:L-1)   )%L]) ;
n.css('zIndex',8);
el.animate({left:next?W:-W  },'slow',function(){
n.css( {zIndex: 9});
el.css( {zIndex: 1,left:0});
})
 
});
})

</script>