Html
    Css
    Js

    
                        
.image {
	list-style:none;
}
.box {
	width:600px;
	height:500px;
	position:relative;
	/*margin:50px auto;
	*/
    border-bottom:10px;
	margin:0px;
}
.image li {
	width:100%;
	/*height:454px;
	*/
    float:left;
	position:absolute;
	display:none;
	border-radius:10px;
	left:0;
}
.image li >img {
	width:100%;
	height:400px;
	border-radius:10px;
}
.num {
	position:absolute;
	list-style:none;
	cursor:pointer;
	bottom:5px;
	left:0px;
}
.num li {
	float:left;
	color:white;
	width:20px;
	height:20px;
	border-radius:100%;
	background-color:gray;
	margin:0 4px;
	text-align:center;
	line-height:20px;
}
.num .current {
	/*red*/
    background-color:#7283F2;
}
.arrow {
	height:60px;
	width:30px;
	position:absolute;
	cursor:pointer;
	background-color:black;
	color:white;
	opacity:0.5;
	font-size:20px;
	text-align:center;
	line-height:60px;
	top:80px;
	display:none;
}
.item-status {
	min-width:100px;
	height:30px;
	line-height:30px;
	position:absolute;
	z-index:99999;
	border-radius:5px 0px;
	background-color:#7283F2;
	color:#ffffff;
	font-weight:600;
	font-size:20px;
	padding:0px 10px;
	left:0;
	top:0;
}
.item-video {
	position:absolute;
	z-index:99999;
	left:300px;
	top:150px;
}
.left {
	left:0;
}
.right {
	right:0;
}

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

jquery轮播图

更新时间:2019-12-05 09:28:48

video标签可以填写视频地址

0