直接使用代码

图片素材

点击下载本素材所包含的图片，js文件

css代码

  <style>
top{position: absolute;;top:0;width: 100%;z-index:9999}
.com-top{padding:30px 40px;font-size:16px;color:#fff}
.com-top .top-logo{vertical-align: middle;width:150px;}
.top-nav {display:inline-block;margin-left:20px;}

.top-nav  li{display:inline-block;padding:0 20px;border-right:1px solid #fff;height:20px;line-height: 20px;;}
.top-nav  li:last-child{border:none}
.top-nav  li a{color:#fff}
.top-nav  li:hover a{color:#199ed8}
.top-tel{float:right;text-align: right;padding-top:10px}
.top-tel img{vertical-align:middle;width: 35px;;}
.com-btn-blue{display:inline-block;background:#199ed8;padding:2px 10px;color:#fff;margin-left:10px;}
.com-btn-blue:hover{color:#fff;background:#0c98d4}
.com-btn-yellow{display:inline-block;background:#ff8359;padding:2px 10px;color:#fff;margin-left:20px;}
.com-btn-yellow:hover{color:#fff;background:#ff4b0f}

@media (min-width: 992px) {
    .com-top .top-logo{vertical-align: middle;width:200px;}
    .top-nav {display:inline-block;margin-left:40px;}
    .top-nav  li{display:inline-block;padding:0 30px;border-right:1px solid #fff;height:20px;line-height: 20px;;}
  }

  .carousel-indicators{bottom:10px;}
  .carousel-indicators li{background:#ccc;border:none;margin-right:10px;width:100px;}
  .carousel-indicators li.active{background:#e70;margin-right:10px;width:100px;}  
</style>

HTML+JS代码

  
<section id='top'>
  <div class="container hidden-xs">
    <div class="com-top">
      <a href="/"><img src="http://www.bootfastui.cn/img/2021/0508-3/logo3.png" class="top-logo" /></a>
      <ul class="top-nav">
        <li><a href="/">首页</a></li>
        <li><a href="/index/index/about">关于我们</a></li>
        <li><a href="/index/index/news/id/42">公司新闻</a></li>
        <li><a href="/index/index/news/id/38">案例展示</a></li>
        <li><a href="/index/index/article/id/174">服务流程</a></li>
        <li><a href="/index/index/article/id/175">联系我们</a></li>
      </ul>

      <!-- <div class="top-tel">
          <img src="http://www.bootfastui.cn/img/2021/0508-3/ico_tel.png">
          <span>13213151888</span>
      </div> -->
    </div>
  </div>
  <div style="position: absolute;right:40px;top:40px;color:#fff;width:180px;font-size:18px;font-weight: bold;"
    class=" hidden-xs">TEL：13213151888</div>
</section>

<!-- 手机导航 -->
<nav class="navbar navbar-default visible-xs">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/"><img src="http://www.bootfastui.cn/img/2021/0508-3/logo4.png" width="100" /></a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">

        <li><a href="/">首页</a></li>
        <li><a href="/index/index/about">关于我们</a></li>
        <li><a href="/index/index/news/id/42">公司新闻</a></li>
        <li><a href="/index/index/news/id/38">案例展示</a></li>
        <li><a href="/index/index/article/id/174">服务流程</a></li>
        <li><a href="/index/index/article/id/175">联系我们</a></li>
      </ul>

    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<section id="myCarousel" class="carousel slide">
  <!-- 轮播（Carousel）指标 -->
  <ol class="carousel-indicators hidden-xs">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>

  </ol>
  <!-- 轮播（Carousel）项目 -->
  <div class="carousel-inner">
    <div class="item active">
      <img src="http://www.bootfastui.cn/img/2021/0508-3/banner1.jpg" width="100%" alt="First slide">

    </div>
    <div class="item">
      <img src="http://www.bootfastui.cn/img/2021/0508-3/banner2.jpg" width="100%" alt="Second slide">

    </div>
    <div class="item">
      <img src="http://www.bootfastui.cn/img/2021/0508-3/banner3.jpg" width="100%" alt="Second slide">
    </div>

  </div>


</section>
<script type="text/javascript">
  $(function () {

    $(function () {
      $('.carousel').carousel({
        interval: 4000
      });
    });


  })
</script>