Tabs

Tabs效果库

1) 示例截图：

2）html结构：

<div class="th-tabs" data-x-type="hummer-tabs/lib/index" data-x-config='{"effect":"leftright","interval":3000,"autoSwitch":"liner"}'>
    <ul class="tab-navs fd-clr">
        <li>导航1</li>
        <li>导航2</li>
        <li>导航3</li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane">
            <img src="https://cbu01.alicdn.com/img/ibank/2015/500/382/2552283005_511594667.jpg"/>
        </div>
        <div class="tab-pane">
            <img src="https://cbu01.alicdn.com/img/ibank/2015/880/991/2547199088_511594667.jpg"/>
        </div>
        <div class="tab-pane">
            <img src="https://cbu01.alicdn.com/img/ibank/2015/460/202/2547202064_511594667.jpg"/>
        </div>
    </div>
    <div class="pager">
        <a class="previous">&lt;上一页</a>
        <a class="next">下一页&gt;</a>
    </div>
</div>

3）css样式：

.th-tabs {
  position: relative;
  border: 1px solid #e5e5e5;
  overflow: hidden;
  width: 100%;
}
.th-tabs .tab-navs {
  background: #e5e5e5;
  text-align: center;
}
.th-tabs .tab-navs li {
  float: left;
  width: 33.33%;
  cursor: pointer;
  line-height: 20px;
  padding: 6px;
}
.th-tabs .tab-navs li.active {
  background: #fff;
}
.th-tabs .tab-navs img {
  width: 100%;
}
.th-tabs .tab-content {
  overflow: hidden;
}
.th-tabs .tab-content img {
  width: 100%;
}
.th-tabs .pager {
  position: absolute;
  z-index: 20;
  bottom: 5px;
  right: 10px;
  color: #00A000;
}
.th-tabs .pager .previous {
  margin-right: 5px;
}
.th-tabs .pager .disabled {
  color: #ccc;
}

4）配置参数：