Html
    Css
    Js

    
                        
* {
	padding:0;
	margin:0;
}
.bottom-div {
	display:flex;
	height:100%;
	width:100%;
	position:fixed;
}
.background {
	position:relative;
	height:300px;
	width:800px;
	overflow:hidden;
	margin:auto;
	border:1px #000000 solid;
}
.tab {
	position:absolute;
	height:300px;
	width:800px;
	overflow:hidden;
	float:left;
	transition:all .5s;
}
.tab1 {
	margin-left:0px;
	background-color:#c7fab2;
}
.tab2 {
	margin-left:160px;
	background-color:#5d9997;
}
.tab3 {
	margin-left:320px;
	background-color:#71dbc4;
}
.tab4 {
	margin-left:480px;
	background-color:#ff8b63;
}
.tab5 {
	margin-left:640px;
	background-color:#ffb773;
}
.tabLeftHover {
	margin-left:0px;
	width:800px;
}
.tabRightHover {
	margin-left:800px;
	width:0px;
}

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

原生js仿手风琴轮播图

更新时间:2020-09-06 00:26:33

0