Html
    Css
    Js

    
                        
* {
	margin:0;
	padding:0;
}
#box {
	margin:0 auto;
	height:300px;
	width:500px;
	overflow:hidden;
	position:relative;
}
.advs {
	width:2500px;
	list-style:none;
	float:left;
	position:absolute;
	transition:left 1s;
}
.advs li {
	float:left;
}
.icons {
	width:300px;
	position:absolute;
	left:calc(50% - 150px);
	bottom:8px;
	text-align:center;
}
.icons > li {
	border-radius:50%;
	display:inline-block;
	/*即可以设置宽高,又变成了行级标签,而且标签之间的换行会转换成空格*/
            width:20px;
	height:20px;
	background:rgba(150,150,152,0.5);
	margin:0 5px;
}
.icons > li.curr {
	background:#99cc99;
}

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

jQuery轮播图和选项卡

0