Html
    Css
    Js

    
                        
* {
	box-sizing:border-box;
}
.carousel {
	position:relative;
	height:300px;
	width:500px;
	overflow:hidden;
}
.carousel-inner {
	position:relative;
}
.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;
}
.carousel-left,.carousel-right {
	position:absolute;
	left:0;
	top:50%;
	transform:translateY(-50%);
	width:40px;
	height:70px;
	z-index:15;
	text-align:center;
	cursor:pointer;
	background:url("https://images.cnblogs.com/cnblogs_com/py-peng/1647393/o_200322083251direction.png") no-repeat -84px;
}
.carousel-left:hover {
	background-position:0;
}
.carousel-right {
	left:auto;
	right:0;
	background-position:-124px;
}
.carousel-right:hover {
	background-position:-42px;
}

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

jQuery轮播图源码(改进版)

更新时间:2020-03-23 00:15:53

js的注释,已描述。

关于html的话,简单的在这里描述一下吧。

carousel:定位,图片大小(请确保有高度)

carousel-inner:放图片,需使用item包裹。

carousel-sort:就是当前进度,li标签需要item。

carousel-left:上一张图。

carousel-right:下一张图。请确保首图使用active。

0