Html
    Css
    Js
* {
	margin:0;
	padding:0;
	list-style:none;
}
.banner {
	position:relative;
}
.tnr {
	margin:0;
	padding:0;
	float:left;
	width:100%;
	overflow:hidden;
	display:none;
}
.tabtz {
	margin:0 auto;
	padding:0;
	list-style:none;
	width:740px;
	overflow:hidden;
	margin-top:16px;
	z-index:2;
}
.tabtz ul {
	width:108%;
	text-align:center;
	margin-top:13px;
}
.tabtz ul li {
	float:left;
	width:22%;
	height:70px;
	margin-top:12px;
	margin-right:12px;
	color:#fff;
	text-align:center;
	line-height:30px;
	cursor:pointer;
}
.on {
	display:block;
}
/* .tabtz ul li.cur {
	background:#96C3FE;
}
*/
        .on {
	display:block;
}
.babg {
	width:100%;
	height:600px;
	overflow:hidden;
	position:absolute;
	top:0;
	z-index:-1;
}
.babg ul li {
	width:100%;
	height:600px;
}
.babg ul li img {
	width:100%;
	height:100%;
}
.tabtz .inner {
	display:block;
	width:175px;
	height:65px;
	position:relative;
	color:#fff;
	font-size:20px;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	text-decoration:none;
	border-bottom:2px solid #fff;
	z-index:10;
}
/* .tabtz .inner span {
	z-index:10;
}
*/
        .tabtz .inner:before {
	content:'';
	position:absolute;
	width:100%;
	bottom:0;
	left:0;
	height:0;
	transition:all .3s;
	-webkit-transition:all .3s;
	-moz-transition:all .3s;
	-ms-transition:all .3s;
	-o-transition:all .3s;
	z-index:-1;
}
.tabtz .inner:hover:before {
	height:100%;
}
.tabtz .li1 .inner:before {
	background:linear-gradient(to right,#F0B557,#D77E45);
}
.tabtz .li2 .inner:before {
	background:linear-gradient(to right,#4CB1CA,#0F5FB1);
}
.tabtz .li3 .inner:before {
	background:linear-gradient(to right,#72AA56,#00734D);
}
.tabtz .li4 .inner:before {
	background:linear-gradient(to right,#4CB1CA,#0F5FB1);
}
.tabtz .li5 .inner:before {
	background:linear-gradient(to right,#F0B557,#D77E45);
}
.tabtz .li6 .inner:before {
	background:linear-gradient(to right,#4CB1CA,#0F5FB1);
}
.tabtz .li7 .inner:before {
	background:linear-gradient(to right,#72AA56,#00734D);
}
.tabtz .li8 .inner:before {
	background:linear-gradient(to right,#F0B557,#D77E45);
}

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

简单的jQuery图片切换效果

更新时间:2021-11-30 11:41:09

运用切换原理实现一个简单的图片切换效果。

0