实例：banner轮播图.docx

效果图 HTML closeSHOPBEST 商城SHOPBEST 商城SHOPBEST 商城SHOPBEST 商城百搭潮抗皱棉植绒潮范CSS * padding: 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.hoverbackground: #f60; .showimg background: #000; padding:9px;overflow: hidden; height: 236px;.showimg ul liborder: 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=$(#btnsli);$btn.hover(function()var shownum=$btn.index(this);$(this).addClass(hover).siblings().removeClass(hover);$(#showimgli).eq(shownum).show().siblings().hide(););Play=function()shownum+;if(shownum=$btn.length)shownum=0;$btn.eq(shownum).addClass(hover).siblings().removeClass(hover);$(#showimgli).eq(shownum).show().siblings().hide();$(#close).click(function()clearInterval(time);$(.advers).slideUp(1000););Pop=function()$(.advers).delay(1000).slideDown(1000);$btn.eq(shownum).add