Html
    Css
    Js

    
                        
.psr {
	position:relative;
}
.psa {
	position:absolute;
}
.fx {
	display:flex;
}
li {
	list-style-type:none;
}
.banner {
	width:100%;
	min-width:1170px;
	height:500px;
	position:relative;
}
.banbox {
	position:absolute;
	top:34px;
	left:50%;
	transform:translate(-50%);
	z-index:1;
	height:476px;
	overflow:hidden;
	box-shadow:0 1px 3px rgba(167,167,167,.4);
	border:10px solid rgba(255,255,255,0.8);
	border-bottom:none;
}
.ban {
	width:1146px;
	overflow:hidden;
	height:400px;
}
.ban li {
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
}
.banbox img {
	width:1186px;
	height:400px;
}
.banbox ol li {
	width:229px;
	font-size:12px;
	text-align:center;
	cursor:pointer;
	height:40px;
	line-height:40px;
	color:#666;
}
.banbox ol {
	justify-content:center;
	line-height:40px;
	color:#ccc;
}
.banbox ol .active {
	border-bottom:4px solid #df147f;
	color:#000;
}
.banbox span {
	width:33px;
	height:66px;
	line-height:66px;
	font-family:cursive;
	color:rgba(f,f,f,.8);
	opacity:.5;
	background:rgba(0,0,0,.5);
	border-radius:2px;
	top:50%;
	margin-top:-53px;
	z-index:5;
	user-select:none;
	text-align:center;
	font-size:24px;
	cursor:pointer;
}
.leftbtn {
	left:-33px;
}
.rightbtn {
	right:-33px;
}
.banbox span:hover {
	background:rgba(0,0,0,.8);
	color:#fff;
}

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

jQuery透明度轮播代码(原创)

更新时间:2020-11-05 20:56:52

可以在jquery中自定义时间,透明度变化

0