直接使用代码

图片素材

css代码

   <style type="text/css">
  #product a{ color:#333}
  #product a:hover{ color:#06f}
</style>

HTML+JS代码

     
<!--产品轮播图 -->
<div class=" pad-y50 " id="product">
    <div class="container">
      <h2 class="text-center">产品中心</h2>
      <p class="text-center pad10">一句话宣传语，一句话宣传语</p>
      <div class="clear"></div>
      <div
        id="myCarousel2"
        class="carousel slide  "
        data-ride="carousel"
      >
        <!-- 轮播（Carousel）指标 -->
        <!-- <ol class="carousel-indicators">
              <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">
            <div class="pic">
              <div class="row ">
                <div class="col-md-4 col-xs-6">
                  <div class="pad5">
                    <a href="" target="_blank" title="">
                      <img class="img-responsive" src="/Public/images/index/product1.jpg" alt="" />
                      <h4 class="text-center">深沟球轴承</h4>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 col-xs-6">
                  <div class="pad5">
                    <a href="" target="_blank" title="">
                      <img class="img-responsive" src="/Public/images/index/product2.jpg" alt="" />
                      <h4 class="text-center">洞心球轴承</h4>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 col-xs-6">
                  <div class="pad5">
                    <a href="" target="_blank" title="">
                      <img class="img-responsive" src="/Public/images/index/product3.jpg" alt="" />
                      <h4 class="text-center">圆柱滚子轴承</h4>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="item ">
            <div class="pic">
              <div class="row ">
                <div class="col-md-4 col-xs-6">
                  <div class="pad5">
                    <a href="" target="_blank" title="">
                      <img class="img-responsive" src="/Public/images/index/product3.jpg" alt="" />
                      <h4 class="text-center">洞心滚子轴承</h4>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 col-xs-6">
                  <div class="pad5">
                    <a href="" target="_blank" title="">
                      <img class="img-responsive" src="/Public/images/index/product2.jpg" alt="" />
                      <h4 class="text-center">圆锥滚子轴承</h4>
                    </a>
                  </div>
                </div>
                <div class="col-md-4 col-xs-6">
                  <div class="pad5">
                    <a href="" target="_blank" title="">
                      <img class="img-responsive" src="/Public/images/index/product1.jpg" alt="" />
                      <h4 class="text-center">推力球轴承</h4>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 轮播（Carousel）导航 -->
        <a
          class="carousel-control right"
          href="#myCarousel2"
          data-slide="prev"
          style="left:-55px; top:50px;background:none; width:40px; color:#09f; font-size:8em; text-align:right;pad-left:10px; height:40px"
          >&lsaquo;</a
        >
        <a
          class="carousel-control right"
          href="#myCarousel2"
          data-slide="next"
          style="right:-40px; top:50px;background:none;  width:40px;color:#09f; font-size:8em; text-align:right;pad-right:10px;height:40px"
          >&rsaquo;</a
        >
      </div>
    </div>
  </div>