Html5+Css3BannerAnimation多方位移动特效_html/css

效果：如图 素材

HTML：

STYLE：

JAVASCRIPT：

$(function(){
var bannerwrap = function(o){
$(".btnwrap b").removeClass("cur");
$(".btnwrap b:eq("+o+")").addClass("cur");
$(".banner .fea").hide();
$(".banner .fea:eq("+o+")").fadeIn(800);
}

var i=0;
$(".btnwrap b").click(function(){
i=$(this).index();
bannerwrap(i);
});

var sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
$(".banner").hover(function(){
clearInterval(sid);
},function(){
sid = setInterval(function(){ i++; if(i==4) i=0; bannerwrap(i); },4000);
});
});

总结：Html5、Css3在近几年使用已经非常广泛了，特别在移动端，应用场景层出不穷，抓紧学习一下，不要凹凸曼啦！