实现原理:将背景图片分成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基础知识的掌握