使用jq做一个酷炫的轮播图
需要用到的源码
ul, li { list-style: none; }
ul.shutter-btn {
display: none;
}
.shutter {
overflow: hidden;
width: 100% !important;
height: 52.8vw !important;
position: relative;
margin: 0px auto;
}
.shutter-img {
z-index: 1;
}
.shutter-img,
.shutter-img a {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.shutter-img a {
cursor: default;
}
.shutter-img a > img {
width: 100%;
height: 100%;
}
.shutter-img .created {
overflow: hidden;
position: absolute;
z-index: 20;
}
.shutter-btn li {
position: absolute;
z-index: 2;
top: 50%;
width: 49px;
height: 49px;
margin-top: -25px;
cursor: pointer;
}
.shutter-btn li.prev {
left: 20px;
background: url(https://www.lvldy.com/a/../images/shutter_prevBtn.png) no-repeat 0 -49px;
}
.shutter-btn li.next {
right: 20px;
background: url(https://www.lvldy.com/a/../images/shutter_nextBtn.png) no-repeat 0 -49px;
}
.shutter-desc {
position: absolute;
z-index: 2;
left: 0;
bottom: 0;
width: 100%;
height: 36px;
background: url(https://www.lvldy.com/a/../images/shutter_shadow.png) repeat;
}
.shutter-desc p {
padding-left: 20px;
line-height: 36px;
color: #fff;
font-size: 14px;
}
这里给大家一个完整的下载包可以直接拿去用
qdxxw 大家拿去用
这里我会在做项目的时候把各种常用的脚本分享给大家
