实例：banner轮播图.docx

效果图

HTML

i>潮范
ding: 0; margin: 0; font: "微软雅黑"; list-style: none;box-sizing: border-box;}
.clear{ clear: both;}
html,body{ margin: 0; padding: 0;}
.advers{ width: 420px; height: 316px;overflow: hidden; position: absolute; right: 0; bottom: 0;;}
.adver_cont{ background: url(../img/title.gif) no-repeat;position relative; height: 50px;}
.adver_cont span{ width: 16px; height: 16px; background: url(../img/close.jpg) no-repeat; font-size: 0;display: inline-block; position: absolute;top: 8px; right: 8px;cursor: pointer;}
.adver_cont h2{ color: #fff;padding-left: 50px;width: 360px; padding-top: 20px;font-size: 16px; overflow: hidden;text-overflow: clip;white-space: nowrap; font-weight: normal;}
.navi{ width: 420px; background: url(../img/Btn.gif) no-repeat; padding: 3px 10px; height: 30px;}
.navi ul li{ float: left;color: #fff;font-size: 14px; width: 60px; text-align: center;padding: 3px 6px;transition: all 0.4s;cursor: pointer; margin-right: 4px; background: #42312A;}
.navi ul li:hover{ background: #f60;}
.navi ul li.hover{background: #f60;}
.showimg{ background: #000; padding:9px;overflow: hidden; height: 236px;}
.showimg ul li{border: 1px solid #fff;margin: 0 auto; height:216px;overflow:hidden;display:none;}
.showimg ul li img{ width: 100%;}

JS

$(function(){
var shownum=0;
var $btn=$("#btns>li");
$btn.hover(function(){
var shownum=$btn.index(this);
$(this).addClass("hover").siblings().removeClass("hover");
$("#showimg>li").eq(shownum).show().siblings().hide();
});

Play=function(){
shownum++;
if(shownum>=$btn.length){shownum=0};
$btn.eq(shownum).addClass("hover").siblings().removeClass("hover");
$("#showimg>li").eq(shownum).show().siblings().hide();
};

$("#close").click(function(){
clearInterval(time);
$(".advers").slideUp(1000);
});

Pop=function(){
$(".advers").delay(1000).slideDown(1000);
$btn.eq(shownum).addClass("hover");
$("#showimg>li").eq(shownum).show();
time=setInterval(function(){
Play();
},2000);
};
Pop();
})