效果：如图 素材
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在近几年使用已经非常广泛了，特别在移动端，应用场景层出不穷，抓紧学习一下，不要凹凸曼啦！
下载本文