.

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>

 

posted @ 2016-04-21 15:54  荆--棘  阅读(1735)  评论(0)  编辑  收藏  举报