Html
    Css
    Js
.banner {
	width:100%;
	height:452px;
	position:relative;
	box-shadow:0 3px 8px 6px rgba(7,17,27,0.1);
	border-radius:5px;
}
.banner a {
	display:block;
	width:100%;
	height:100%;
	position:absolute;
	border-radius:5px;
}
.banner a img {
	width:100%;
	height:100%;
	display:block;
	border-radius:5px;
}
.prev,.next {
	position:absolute;
	z-index:100;
	width:50px;
	height:50px;
	top:47%;
}
.prev:hover,.next:hover {
	cursor:pointer;
}
.prev {
	left:20px;
	background:url(https://www.jq22.com/img/cs/500x500-1.png) no-repeat 0 -49px;
}
.next {
	right:20px;
	background:url(https://www.jq22.com/img/cs/500x500-1.png) no-repeat 0 -49px;
}
.banner_text {
	position:absolute;
	left:0;
	bottom:0;
	height:50px;
	line-height:50px;
	background:rgba(0,0,0,0.6);
	z-index:100;
	color:#fff;
	width:100%;
	box-sizing:border-box;
	padding:0 100px;
	text-align:right;
}

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

jquery轮播图

更新时间:2023-03-17 10:35:36

0