jq实现碎片轮播

效果如下:
碎片轮播.gif

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

html


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 = $("
").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($("
").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基础知识的掌握

你可能感兴趣的:(jq实现碎片轮播)