Html
    Css
    Js
* {
	margin:0;
	padding:0;
}
body {
	padding:20px;
}
#wrap {
	width:600px;
	height:400px;
	border:3px solid #000;
	margin:0 auto;
	/* padding:20px;
	*/
	position:relative;
	/* 这里是重要点1,位置设定 */
            overflow:hidden;
}
#picture {
	/* border:2px solid  #000;
	*/
	position:absolute;
	/* 这里是重要点2,位置设定 */
	width:4200px;
	height:400px;
	z-index:1;
}
#picture img {
	width:600px;
	height:400px;
	/*border:2px solid #000;
	*/
	float:left;
	/* 这里是重要点3,位置设定 */
	/* display:none;
	*/
}
#buttons {
	position:absolute;
	height:10px;
	width:100px;
	z-index:2;
	left:250px;
	/* background:red;
	opacity:0.3;
	*/
	bottom:20px;
}
#buttons span {
	width:10px;
	height:10px;
	border-radius:6px;
	border:2px solid #fff;
	float:left;
	margin-left:5px;
	cursor:pointer;
	/* 这个地方以后注意兼容性 */
}
#buttons .on {
	background:orange;
}
.arrow {
	display:none;
	width:50px;
	height:50px;
	position:absolute;
	background-color:rgba(0,0,0,.3);
	color:#fff;
	z-index:2;
	top:170px;
}
.arrow:hover {
	background-color:rgba(0,0,0,.7);
}
#wrap:hover  .arrow {
	display:block;
}
#prev {
	left:10px;
}
#next {
	right:10px;
}

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

轮播图(原创)

简单的轮播图设计,代码简单 容易移植

0