本文实例为大家分享了jQuery轮播效果展示的具体代码,供大家参考,具体内容如下
jQ代码:
在写jQuery代码之前一定要先导库,此处我用的是3.0的库
css样式:
.divbg {
width: 100%;
height: 350px;
/*overflow: hidden;*/
position: relative;
}
.mb {
width: 30%;
height: 350px;
background: rgba(0,0.3);
position: absolute;
}
.mb:first-child {
left: 0px;
}
.mb:nth-child(2) {
right: 0px;
}
.ullist {
width: 200%;
height: 350px;
margin-left: -50%;
}
.lilist {
width: 20%;
height: 350px;
list-style: none;
float: left;
}
.imglist {
width: 100%;
height: 100%;
}
.divblock{
width: 20%;
height: 70%;
border: 4px solid rgba(255,255,0.32);
position: absolute;
z-index: 5;
left: 46%;
top: 15%;
overflow: hidden;
}
.s_mb{
width: 100%;
height: 100%;
background: rgba(0,0.5);
position: absolute;
z-index: 10;
}
.s_ullist{
width: 500%;
height: 100%;
margin-left: -200%;
}
.s_lilist{
width: 20%;
height: 100%;
list-style: none;
float: left;
}
.s_imglist{
height: 100%;
width: 100%;
}
.s_mb img{
margin-left: 16%;
margin-top: 65%;
cursor: pointer;
}
html样式: