Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
	list-style:none;
}
.wrapper {
	width:1100px;
	height:600px;
	margin:0 auto;
	position:relative;
	/* border:1px solid black;
	*/
}
.wrapper ul {
	position:relative;
	height:600px;
}
.wrapper li {
	position:absolute;
	width:262px;
	height:389px;
	cursor:pointer;
	top:50%;
	left:50%;
	margin-left:-131px;
	margin-top:-194px;
	transition:z-index 0.2s ease-in-out,transform 0.8s ease-in-out 0.3s;
}
.wrapper li img {
	width:100%;
	height:100%;
}
.btn {
	display:inline-block;
	width:80px;
	height:40px;
	border:1px solid #000;
	border-radius:8px;
	cursor:pointer;
	line-height:40px;
	text-align:center;
	font-weight:bolder;
	position:absolute;
	left:45%;
}
#prev {
	transform:translateX(-110%);
}

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

原生js轮播

这是使用原生的js来做的轮播图,没有使用jq库

0