div格局 _JavaScript

div布局

如图片所示  我想做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?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>

不知道这效果行么。。
------解决方案--------------------
引用jquery

<html>

<head>

     

<style>

    div{

        cursor: pointer;