jq实现碎片轮播

效果如下： 碎片轮播.gif

实现原理：将背景图片分成100等分 实现宽高从0到他们本身的宽高的动画

html

<div id="banner">
    <div id="pic">
        <ul>
            <li class="active"><a href="#"><img src="images/b1.jpg"></a></li>
            <li><a href="#"><img src="images/b2.jpg"></a></li>
            <li><a href="#"><img src="images/b3.jpg"></a></li>
            <li><a href="#"><img src="images/b4.jpg"></a></li>
            <li><a href="#"><img src="images/b5.jpg"></a></li>
        </ul>

    </div>
    <div id="tab">
        <ul>
            <li class="on"></li><li></li><li></li><li></li><li></li>
        </ul>
    </div>
    <div id="btn">
        <div id="leftBtn">&lt;</div>
        <div id="rightBtn">&gt;</div>
    </div>
</div>

css3

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre,
        form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0;border:none; list-style:none;}
        #banner{ width:520px; height:280px; margin:40px auto; position:relative;/* overflow: hidden*/}
        #pic ul{
            width: 520px; height:280px;position: absolute;left: 0;top: 0;}
        #pic ul li {
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }
        #pic ul li.active{
            display: block;
           }
        #tab{ width:76px; height:11px; background:rgba(255,255,255,0.3); position:absolute;left:50%;bottom:10px;margin-left:-38px; border-radius:30px;z-index: 11;}
        #tab li{ cursor:pointer; width:10px; height:10px; border-radius:100%; background:#fff; float:left; margin:1px 2px;}
        #tab li.on{ background-color:red;}
        #btn{ display:block;}
        #leftBtn,#rightBtn{ position:absolute; top:50%; margin-top:-10px; color:#fff; width:20px; height:32px; background:rgba(0,0,0,0.3) ; text-align:center;line-height:32px; font-size:20px; cursor:pointer; z-index:11;}
        #leftBtn{ left:5px;  border-bottom-right-radius:50%;}
        #rightBtn{ right:5px;border-top-left-radius:50%;}
        #btn .hover{ background-color:#333;}

js代码（重要）

$(function () {
        //初始化
        var $maoni = $("<div class='maoni'></div>").appendTo("#banner");
        var arr = [];
        var lock=true;
        var num = 0;
        var $lis = $("#pic ul li");
        for (var i = 0; i < 10; i++) {
            for (var j = 0; j < 10; j++) {
                arr.push($("<div></div>").css({
                    width: 0,
                    height: 0,
                    "background": "url(images/b1.jpg) no-repeat " + j * -54 + "px " + i * -28 + "px",
                    "position": "absolute",
                    "top": i * 28 + "px",
                    "left": j * 54 + "px"
                }).appendTo($maoni));
            }
        }
        var timer=null;
        //做按钮
        $("#btn #leftBtn").click(function () {
            if(!lock) return;
            lock=false;
            num--;
            if (num < 0) {
                num = 4;
            }
            $("#tab li").eq(num).addClass("on").siblings().removeClass();
            for (var i = 0; i < arr.length; i++) {
                arr[i].css({"background-image": "url(images/b" + (num + 1) + ".jpg)"});
                arr[i].delay(Math.random() * 100).animate({
                    width: 54,
                    height: 28,
                }, 800 + Math.random() * 1000)
            }
            //保证回调函数只有一次
            setTimeout(function () {
                //更换图片
                //排他模型
                $lis.each(function () {
                    $(this).removeClass("active");
                })
                $lis.eq(num).addClass("active");
                //让所有的猫腻碎片 归位
                for (var i = 0; i < arr.length; i++) {
                    arr[i].css({width: 0, height: 0})
                }
                lock=true;
            }, 2000)
        })

        //有按钮
        $("#btn #rightBtn").click(function () {
            if(!lock) return;
            lock=false;
            $("#tab li").eq(num).addClass("on").siblings().removeClass();
            move();
        })

        //自动轮播
        timer=setInterval(move,3000);
        function move() {
                num++;
                if (num >4) {
                    num = 0;
                }
                $("#tab li").eq(num).addClass("on").siblings().removeClass();
                for (var i = 0; i < arr.length; i++) {
                    arr[i].css({"background-image": "url(images/b" + (num + 1) + ".jpg)"});
                    arr[i].delay(Math.random() * 100).animate({
                        width: 54,
                        height: 28,
                    }, 800 + Math.random() * 1000)
                }
                //保证回调函数只有一次
                setTimeout(function () {
                    //更换图片
                    //排他模型
                    $lis.each(function () {
                        $(this).removeClass("active");
                    })
                    $lis.eq(num).addClass("active");
                    //让所有的猫腻碎片 归位
                    for (var i = 0; i < arr.length; i++) {
                        arr[i].css({width: 0, height: 0})
                    }
                    lock=true;
                }, 2000)
            }
        //手动
        $("#tab li").mouseover(function () {
            $(this).addClass("on").siblings().removeClass("on");
           move();
        })
        $("#banner").hover(function () {
            clearInterval(timer);
        },function () {
            timer=setInterval(move,3000);
        })
    })

总结：主要考察对背景图片定位以及对jq基础知识的掌握