菜单+大图轮播

**CSS JS外部引用**
```html
<link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui/css/layui.css" />
<link rel="stylesheet" href="../res/static/css/index.css">
<script src="https://www.layuicdn.com/layui/layui.js"></script>
```
**html 代码区域**
```html
 
  <div class="nav index">
    <div class="layui-container">
      
      <div class="nav-logo">
        <a href="index.html">
          <img src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/logo/logo.png" alt="网络公司">
        </a>
      </div>
      <div class="nav-list">
        <button>
          <span></span><span></span><span></span>
        </button>
        <ul class="layui-nav" lay-filter="">
          <li class="layui-nav-item"><a href="product.html">产品</a></li>
          <li class="layui-nav-item"><a href="news.html">动态</a></li>
          <li class="layui-nav-item"><a href="case.html">案例</a></li>
          <li class="layui-nav-item"><a href="about.html">关于</a></li>
          <li class="layui-nav-item"><a href="https://www.17sucai.com/" target="_blank">模板</a></li>
        </ul>
      </div>
    </div>
  </div>
  
  <div>
    <div class="layui-carousel" id="banner">
      <div carousel-item>
        <div>
          <img src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/banner1.jpg">
          <div class="panel">
            <p class="title">网络公司</p>
            <p>完美前端体验</p>
          </div>
        </div>
        <div>
          <img src="https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/images/banner2.jpg">
          <div class="panel">
            <p class="title">网络公司</p>
            <p>完美前端体验</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  
  <div class="main-product" style="height: 800px;">

</div>
```

**index.css引用**
```css
body{background: #fff;}
/** 首页 */
/*导航部分*/
.nav{width: 100%; height: 80px; box-shadow: 0 3px 3px 0 #CCC; background: #FFF; position: fixed; left: 0; top: 0; z-index: 999; overflow: hidden; transition: 0.3s}
.nav.index{background: rgba(255, 255, 255 ,0.8); box-shadow: 0 0 0 0 rgba(0,0,0,0.05);}
.nav.scroll{ background: #FFF; box-shadow: 0 3px 3px 0 rgba(0,0,0,0.05); transition: 0.3s}
.nav .layui-container{position: relative; transition: all 400ms ease-out;}
.nav .nav-logo{height: 100%; position: absolute; top: 0; left: 15px; line-height: 80px;}
.nav .nav-list{display: inline-block; height: 80px;}
.nav .nav-list button{width: 25px; height: 30px; position: absolute; top: 30px; right: 15px; background-color: transparent; border: none; outline: none; cursor: pointer;}
.nav .nav-list button span{display: block; width: 25px; height: 2px; background: #2db5a3; margin-bottom: 6px; transition: 0.5s;}
.nav .nav-list button span.spa1{transform: rotate(45deg);}
.nav .nav-list button span.spa3{transform: rotate(-45deg) translate(5px,-5px);}
.nav .layui-nav{width: 100%; position: absolute; top: 80px; right: 0; color: #000; background: transparent;}
.nav .layui-nav .layui-nav-item{display: block; line-height: 60px;}
.nav .layui-nav *{font-size: 18px;}
.nav .layui-nav .layui-nav-item a{padding: 0 0; color: #000;}
.nav .layui-nav-bar,
.nav .layui-nav .layui-this:after{height: 2px; background-color: #2db5a3;}
.nav .layui-nav .layui-this a
,.nav .layui-nav .layui-nav-item a:hover{color: #2db5a3;}

/*轮播*/
#banner img{min-width: 100%; height: 898px;}
#banner .panel{width: 400px; position: absolute; top: 25%; left: 50%; margin-left: -200px; text-align: center;}
#banner .panel p{color: #8c8c8c; font-size: 44px; line-height: 80px; letter-spacing: 15px;}
#banner .panel p.title{color: #4a4a4a; font-size: 54px; letter-spacing: 10px;}

@media screen and (max-width: 480px){
}
/*小屏幕*/
@media screen and (min-width: 768px){
  .nav{max-height: 80px;}
  .nav.index{background: rgba(255, 255, 255 ,0.3);}
  .nav .nav-list button{display: none;}
  .nav .layui-nav{width: auto; position: absolute; top: 0; padding: 0 5px; border-radius: 0; margin: 0;}
  .nav .layui-nav .layui-nav-item{display: inline-block; margin:0 53px; line-height: 80px;}

}
@media screen and (min-width: 768px) and (max-width: 992px){

}
/*大屏幕*/
@media screen and (min-width: 992px){

}
/*超大屏幕*/
@media screen and (min-width: 1200px) {

}
@media screen and (min-width: 1300px) {

}

```

**前端页面引用JS firm.js**
```html
<script>
  layui.config({
    base: '../res/static/js/'
  }).use('firm');
</script>
```
**firm.js文件**
```javascript
layui.define(['jquery', 'element', 'carousel', 'laypage'], function(exports){
  var $ = layui.jquery
  ,element = layui.element
  ,carousel = layui.carousel
  ,laypage = layui.laypage;

//轮播渲染
  carousel.render({
    elem: '#banner'
    ,width: '100%'
    ,height: '898px'
    ,arrow: 'always'
  });

//滚动监听
  $(window).scroll(function() {
    var scr=$(document).scrollTop();
    scr > 0 ? $(".nav").addClass('scroll') : $(".nav").removeClass('scroll');
  });

//轮播文字
  $(function(){
    $('.banner').children('.title').addClass('active');
  })

//导航切换
  var btn = $('.nav').find('.nav-list').children('button')
  ,spa = btn.children('span')
  ,ul = $('.nav').find('.nav-list').children('.layui-nav');
  btn.on('click', function(){
    if(!$(spa[0]).hasClass('spa1')){
      spa[0].className = 'spa1';
      spa[1].style.display = 'none';
      spa[2].className = 'spa3';
      $('.nav')[0].style.height = 90 + ul[0].offsetHeight + 'px';
    }else{
      spa[0].className = '';
      spa[1].style.display = 'block';
      spa[2].className = '';
      $('.nav')[0].style.height = 80 + 'px';
    }
  });

exports('firm', {});
});
```
**完整案例：[下载地址](https://hbsjsd.oss-cn-zhangjiakou.aliyuncs.com/demo/top.zip "下载地址")**

速建时代TPCMS管理系统

菜单+大图轮播