Html
    Css
    Js

    
                        
* {
	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");
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

原生JS代码实现自动TAB切换(原创)

更新时间:2019-10-27 23:07:39

用原生js实现的自动tab切换效果,加了setinterval定时器,实现间隔3秒自动切换,用clearinterval实现鼠标经过即停止自动轮播

0