如图片所示 我想做4个div的交替 就如图片显示的 我称上面的div为 类型1，下面的为 类型2。
我要做到的效果是：1、点击类型2的div（其中的1，2,3,4 小的div） 类型1的4个div跟真交替。
2、每5秒类型1的div换一层。
上面的移动最好有移动动画效果。
我想问的 大家觉得 我该如何来安排类型1的div层呢 我现在想到了一种方法 就是做4个div层 一个显示 其他3个消失。 大家帮忙看看有没什么更好的方法。 还有如果要做移动动画的效果，大家有没有什么好的参考资料，或代码给我看看。谢谢大家web divdiv
<div class="container">
<div>aaaaaaaaa</div>
<div>aaaaaaaaa</div>
<div>aaaaaaaaa</div>
<div>aaaaaaaaa</div>
</div>
<!DOCUTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
.container{position:relative;height:90px;width:100px;overflow:hidden;}
.container .child{float:left;}
.contoller ul li{float:left;list-style:none;border:1px solid #444;padding:2px;margin-left:5px;}
</style>
</head>
<body>
<div class="container">
<div class="child">aaaaaaaaaaaaaa</div>
<div class="child">bbbbbbbbbbbbbb</div>
<div class="child">cccccccccccccc</div>
<div class="child">dddddddddddddd</div>
</div>
<div style="clear:both"></div>
<div class="contoller">
<ul>
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var html = $('.container').html();
var per = $('.child').height();
var height = per*4;
$('.container').height(height);
$('.container').html(html+html);
$('.contoller ul li').click(function(){
var idx = $(this).index();
var old = $('.container').scrollTop();
$('.container').animate({scrollTop:per*idx},200,function(){
if(per*idx==height){
$('.container').scrollTop(0);
}
})
})
})
</script>
</body>
</html>不知道这效果行么。。
<html>
<head>
<style>
div{
cursor: pointer;
font-size:10pt;
}
.pb{
width:300px;/*单个图片的宽（和显示区域相同）*/
height:300px;/*单个图片的高（和显示区域相同）*/
}
#plist{
position:relative;
top:-29px;
}
#pshow{
width:300px;/*显示区域的宽度*/
height:300px;/*显示区域的高度*/
overflow: hidden;
position:absolute;
top:20px;
left:20px;
}
</style>
<script src="jquery-1.9.1.js" type="text/javascript"></script>
<script>
var i=1;
function pchange(obj){
var imgtop=((0-(obj-1))*300-29)+"px";
$("#plist").animate({
top:imgtop
},"slow");
i=obj++;
if(i>4){
i=1;
}
}
function timechange(){
pchange(i);
i++;
if(i>4){
i=1;
}
setTimeout('timechange()',3000);
}
</script>
</head>
<body onload="timechange()">
<div id="pshow">
<div style="display:table;position:relative;left:150px;top:260px;z-index:99;">
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(1)">1</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(2)">2</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(3)">3</div>
<div style="display:table-cell;width:10px;height:20px;"></div>
<div style="display:table-cell;width:25px;height:20px;background:#EEEE00;text-align:center;" onmouseover="pchange(4)">4</div>
</div>
<div id="plist">
<div class="pb" style="background:green;">
</div>
<div class="pb" style="background:red;">
</div>
<div class="pb" style="background:blue;">
</div>
<div class="pb" style="background:yellow;">
</div>
</div>
</div>
</body>
</html>