首页
点击看看
会自动的
我的网站
* { margin:0; padding:0; } body { font-family:"微软雅黑"; color:#666; } /*主体*/ .main { width:1200px; height:505px; overflow:hidden; margin:50px auto 0 auto; border:1px solid #eee; border-radius:8px 8px 0 0; } /*TAB导航部分*/ .nav { width:100%; height:45px; } .nav span { display:inline-block; width:300px; height:100%; border-radius:4px; float:left; text-align:center; line-height:45px; cursor:pointer; } .nav span.active { background:#ffcc00; font-weight:bold; } .nav span:first-child.active { border-radius:4px 4px 4px 0; } .nav span:last-child.active { border-radius:4px 4px 0 4px; } /*图片部分*/ .banner { width:100%; height:460px; overflow:hidden; } .banner-slide { width:1200px; height:460px; display:none; background-repeat:no-repeat; } .ban-active { display:block; } .slide1 { background:url("http://www.jq22.com/img/cs/500x500-1.png"); } .slide2 { background:url("http://www.jq22.com/img/cs/500x500-2.png"); } .slide3 { background:url("http://www.jq22.com/img/cs/500x500-3.png"); } .slide4 { background:url("http://www.jq22.com/img/cs/500x500-4.png"); }
更新时间:2019-10-27 23:07:39
用原生js实现的自动tab切换效果,加了setinterval定时器,实现间隔3秒自动切换,用clearinterval实现鼠标经过即停止自动轮播