jq酷炫轮播图在线下载使用

使用jq做一个酷炫的轮播图

image

需要用到的源码


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  大家拿去用


这里我会在做项目的时候把各种常用的脚本分享给大家






微信扫码咨询
建站咨询
cache
Processed in 0.010759 Second.