html+jq实现简单的图片轮播

　　今天上班没事,就自己琢磨着写一下图片轮播,可是没想到,哈哈竟然写出来啦,下面就贴出来代码,作为纪念保存下下哈:
<body style="text-align: center;">
    <div id="img" style="background: gray;opacity: 1;width: 100%;height: 600px;margin: 0 auto;position: relative;overflow: hidden;">
        <div class="img1" style="width: 100%;height: 100%;position: absolute;left: -100%">
            <img src="1.jpeg" style="background: yellow;width: 100%;height: 600px">
        </div>
        <div class="img2 ratato" style="float: left;position: absolute;width: 100%;height: 100%;left: 0">
            <img src="2.jpg" style="background: red;width: 100%;height: 600px">
        </div>
        <div class="img3" style="float: left;position: absolute;width: 100%;height: 100%;left: 100%">
            <img src="3.jpg" style="background: blue;width: 100%;height: 600px">
        </div>
    </div>
    <div>
        <a href="javascript:void(0);" onclick="up()">上一页</a>
        <a href="javascript:void(0);" onclick="next()">下一页</a>
    </div>
    <script type="text/javascript">
        var img1,img2,img3;//定义全局变量用来接收DOM对象
        var t1,t2,t3,t;
        $(function(){
            t = setTimeout(function(){
                test();
            },4000)//延迟函数,带dom\'准备就绪时间,延迟4秒执行test函数
            // clearTimeout(t);
            function test(){
                $(\'.img2\').animate({
                    left:\'100%\'
                })//将class为img2的div通过动画向右移动整个容器的宽度,下面动画同理可得
                $(\'.img1\').animate({
                    left:\'0px\'
                })
                img3 = $(\'.img3\').remove();
                $("#img").prepend(img3);
                img3.css(\'left\',\'-100%\')
                t1 = setTimeout(function(){
                    test1();
                },4000)
            }
            function test1(){                
                $(\'.img3\').animate({
                    left:\'0px\'
                })
                $(\'.img1\').animate({
                    left:\'100%\'
                })
                img2 = $(\'.img2\').remove();
                $(\'#img\').prepend(img2);
                img2.css(\'left\',\'-100%\')
                t2 = setTimeout(function(){
                    test2()
                },4000);
            }
            function test2(){
                img2.animate({
                    left:\'0px\'
                })
                img3.animate({
                    left:\'100%\'
                })
                img1 = $(\'.img1\').remove();
                img1.css(\'left\',\'-100%\');
                $(\'#img\').prepend(img1);
                t3 = setTimeout(function(){
                    test()
                },4000)
            }
        })

        // function up(){
        //     clearTimeout(t);
        //     clearTimeout(t1,t2,t3,t);
        //     var a = $(\'#img\').children().eq(1);
        //     a.children().eq(0).attr(\'class\',\'ratato\');
        //     // a.attr(\'class\',\'ratato\');
        //     // a.animate({
        //     //     left:\'-100%\'
        //     // })
        //     // a.next().animate({
        //     //     left:\'0px\'
        //     // });
        //     // var next = a.prev().remove();
        //     // // alert(next.attr(\'class\'));

        //     // a.next().after(next);
            
        //     // next.css(
        //     //     \'left\',\'100%\'
        //     // )
        // }
        // function next(){

        // }
    </script>
</body>