Slide

Slide效果

1) 示例截图：

2）html结构：

<div class="th-slide" data-x-type="hummer-slide/lib/index" data-x-config='{"activeCls":"active","interval":3000,"autoSwitch":2000,"speed":800}'>
    <ul class="slide-navs fd-clr">
        <li class="active"></li>
        <li></li>
        <li></li>
    </ul>
    <div class="slide-content fd-clr">
        <div class="slide-pane">
            <img src="https://cbu01.alicdn.com/img/ibank/2015/500/382/2552283005_511594667.jpg"/>
        </div>
        <div class="slide-pane">
            <img src="https://cbu01.alicdn.com/img/ibank/2015/880/991/2547199088_511594667.jpg"/>
        </div>
        <div class="slide-pane">
            <img src="https://cbu01.alicdn.com/img/ibank/2015/460/202/2547202064_511594667.jpg"/>
        </div>
    </div>
    <div class="slide-pager">
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
    </div>
</div>

3）css样式：

/*/Users/hui/Documents/workspace/alicn/hummer-slide/examples/assets/css/view.less */
.th-slide .slide-content .slide-pane {
  height: 100%;
}
.th-slide .slide-content .slide-pane img {
  height: 100%;
}
.th-slide {
  position: relative;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  width: 100%;
}
.th-slide .slide-navs {
  position: absolute;
  z-index: 10;
  bottom: 10px;
  left: 50%;
  margin-left: -24px;
}
.th-slide .slide-navs li {
  float: left;
  width: 10px;
  height: 10px;
  border-radius: 10px;
  margin: 3px;
  background: #F16C0F;
  cursor: pointer;
}
.th-slide .slide-navs li.active {
  background: #ECE611;
}
.th-slide .slide-navs img {
  width: 100%;
}
.th-slide .slide-content {
  overflow: hidden;
}
.th-slide .slide-content img {
  width: 100%;
}
.th-slide .slide-content .slide-pane {
  display: none;
}
.th-slide .slide-content :first-child {
  display: block ;
}
.th-slide .slide-pager .prev,
.th-slide .slide-pager .next {
  font-family: "orator std", SimSun;
  text-decoration: none;
  width: 42px;
  height: 42px;
  line-height: 54px;
  overflow: hidden;
  position: absolute;
  top: 50%;
  margin-top: -21px;
  z-index: 2;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  background: #000;
  filter: alpha(opacity=40);
  opacity: .4;
  border-radius: 21px;
  -moz-border-radius: 21px;
  -o-border-radius: 21px;
  -webkit-border-radius: 21px;
}
.th-slide .slide-pager .prev {
  left: 5px;
}
.th-slide .slide-pager .next {
  right: 5px;
}

4）配置参数：