头部轮播图片

**JS引用**
```html
<script type="text/javascript" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/js/jquery.min.js"></script>
<script type="text/javascript" src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/js/jquery.flexslider-min.js"></script>
```
**HTML 代码 **
```html
<div class="flexslider " >
    <ul class="slides">
        <li style="background:url(images/banner1.jpg) 50% 0 no-repeat;"></li>
        <li style="background:url(images/banner2.jpg) 50% 0 no-repeat;"></li>
        <li style="background:url(images/banner3.jpg) 50% 0 no-repeat;"></li>
    </ul>
</div>
```
**CSS代码**
```css
.flexslider{position:relative;overflow:hidden;float: left;width: 100%;z-index: -100 }
        .slides{position:relative;z-index:1;}
        .slides li{ min-height: 690px;}
        .flex-control-nav{position:absolute;bottom:40px; z-index:2;width:100%;text-align: center;}
        .flex-control-nav li{display:inline-block;width:14px;height:14px;margin:0 5px;*display:inline;zoom:1;}
        .flex-control-nav a{display:inline-block;width:14px;height:14px;line-height:40px;overflow:hidden;background:url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/dot.png) right 0 no-repeat;cursor:pointer;}
        .flex-control-nav .flex-active{background-position:0 0;}
        .flex-direction-nav{position:absolute;z-index:3;width:100%;top:45%;}
        .flex-direction-nav li a{display:block;width:50px;height:50px;overflow:hidden;cursor:pointer;position:absolute;}
        .flex-direction-nav li a.flex-prev{left:40px;background:url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/prev.png) center center no-repeat;}
        .flex-direction-nav li a.flex-next{right:40px;background:url(https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/next.png) center center no-repeat;}
        .flex-active-slide h2 {
            -webkit-animation: bounce 3s ease-out infinite;
            -moz-animation: bounce 3s ease-out infinite;
            -o-animation: bounce 3s ease-out infinite;
            -ms-animation: bounce 3s ease-out infinite;
            animation: bounce 3s ease-out infinite;
            animation-iteration-count:1;/*执行次数*/
            -webkit-animation-iteration-count:1; /* Safari 和 Chrome */

}
        @media (max-width: 580px) {
            .flex-direction-nav li a{ width: 25px; height: 25px;}
            .flex-direction-nav li a.flex-prev{ background-size: 100%; left: 10px}
            .flex-direction-nav li a.flex-next{background-size: 100%; right: 10px}
            .slides li {min-height: 230px;background-size: 100% 100%!important;}
        }

```
HTML页面调用JS
```javascript
<script type="text/javascript">
    $(document).ready(function() {
        $('.flexslider').flexslider({
            directionNav: true,
            pauseOnAction: false
        });
    });
</script>
```

速建时代TPCMS管理系统

头部轮播图片