Html
    Css
    Js

    
                        
* {
	box-sizing:border-box;
}
.carousel {
	position:relative;
	height:300px;
	width:500px;
}
.carousel-inner {
	position:relative;
	height:100%;
	overflow:hidden;
}
.carousel-inner .item {
	opacity:0;
	z-index:1;
	position:absolute;
	top:0;
	left:0;
}
.carousel-inner .item.active {
	opacity:1;
	transition:opacity .5s;
	z-index:5;
}
.carousel-inner .item > img {
	max-width:100%;
	height:auto;
}
.carousel-sort {
	list-style:none;
	padding:0;
	position:absolute;
	bottom:10px;
	z-index:10;
	left:50%;
	transform:translateX(-50%);
}
.carousel-sort .item {
	cursor:pointer;
	padding:4px 20px;
	margin-right:5px;
	float:left;
	border:1px solid black;
	background-color:#b0b0b0;
}
.carousel-sort .item.active {
	background-color:#f5f5f5;
}

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

jQuery轮播图基本代码

更新时间:2020-03-20 23:23:35

0