HTML网页中的多个轮播

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

    <script src=" https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/owl.carousel.min.js "></script>
    <link href=" https://cdn.jsdelivr.net/npm/owl.carousel@2.3.4/dist/assets/owl.carousel.min.css " rel="stylesheet">

    <style>
    h1, h2, h3 {
      margin: 0;
      padding: 0;
      line-height: 24px;
    }

    h2 {
      color: #fff;
      padding-top: 15px;
      font-weight: 200;
    }

    .top-bar {
      background: #003451;
      height: 60px;
    }

    .form-control {
        display: block;
        width: 100%;
        height: 34px;
        padding: 6px 12px;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        border-radius: 0;
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }

    .btn {
        display: inline-block;
        padding: 6px 12px;
        margin-bottom: 0;
        font-size: 14px;
        font-weight: 400;
        line-height: 1.42857143;
        text-align: center;
        white-space: nowrap;
        vertical-align: middle;
        -ms-touch-action: manipulation;
        touch-action: manipulation;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        background-image: none;
        border: 1px solid transparent;
        border-radius: 0;
    }

    /* Filter Dropdown */

    /*Navigation*/

    .nav-bar {
      background: #333;
    }

    .arrowsWrap {
      width: 50px;
      margin: 0 auto;
    }
    .arrowsWrap .arrows {
      padding: 15px 0;
      cursor: pointer;
      display: inline-block;

    }
    .arrowsWrap .arrows img {
      /*Loop Animation*/
      transition: 0.70s;
      -webkit-transition: 0.70s;
      -moz-transition: 0.70s;
      -ms-transition: 0.70s;
      -o-transition: 0.70s;
      width: 50px;
      height: 50px;
    }
    .arrowsWrap .arrows img:hover {
      opacity: .5;
    }

    .arrows.open img {
      /*Rotate Animation*/
      transition: 0.70s;
      -webkit-transition: 0.70s;
      -moz-transition: 0.70s;
      -ms-transition: 0.70s;
      -o-transition: 0.70s;
      -webkit-transform: rotate(180deg);
      -moz-transform: rotate(180deg);
      -o-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
      transform: rotate(180deg);
    }

    .nav {
      background: #333;
      padding: 0;
      cursor: pointer;
      display: none;
    }
    .nav ul {
      list-style: none;
      display: inline;
      padding: 0;
    }
    .nav ul li {
      /*border-bottom: 1px solid white;*/
      padding: 17px;
      transition: .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: .25s ease-in-out;
    }
    .nav ul li a {
      color: #818181;
      text-decoration: none;
      display: block;
      font-size: 20px;
      font-weight: 300;
    }
    .nav ul li:hover {
      background: rgba(255, 255, 255, 0.7);
      color: #5A5A5A;
      transition: .25s ease-in-out;
      -moz-transition: opacity .25s ease-in-out;
      -webkit-transition: .25s ease-in-out;
    }

    .nav-title {
      margin-right: 500px;
      text-transform: uppercase;
      font-size: 20px;
    }

    /**/
    #owl-demo .item{
      background: #3498DB;
      padding: 30px 0px;
      margin: 0;
      color: #FFF;
      border-radius: 0;
      text-align: center;
      height: 300px;
    }

    #owl-demo2 .item{
      background: #2980B9;
      padding: 30px 0px;
      margin: 0;
      color: #FFF;
      text-align: center;
      border-radius: 0;
      height: 300px;
    }

    #owl-demo3 .item{
      background: #3498DB;
      padding: 30px 0px;
      margin: 0;
      color: #FFF;
      text-align: center;
      border-radius: 0;
      height: 300px;
    }

    .customNavigation{
      text-align: center;
    }
    /*use styles below to disable ugly selection*/
    .customNavigation a{
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    }
    </style>

     <div class="top-bar">
      <div class="container-fluid">
        <div class="col-sm-6">
          <h2>Logo</h2>
        </div>
        <div class="col-sm-6">
          <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Search</button>
          </form>
        </div>
      </div>
    </div>

    <div id="owl-demo" class="owl-carousel owl-theme">
      <div class="item"><h1>1</h1></div>
      <div class="item"><h1>2</h1></div>
      <div class="item"><h1>3</h1></div>
      <div class="item"><h1>4</h1></div>
      <div class="item"><h1>5</h1></div>
      <div class="item"><h1>6</h1></div>
      <div class="item"><h1>7</h1></div>
      <div class="item"><h1>8</h1></div>
      <div class="item"><h1>9</h1></div>
      <div class="item"><h1>10</h1></div>
      <div class="item"><h1>11</h1></div>
      <div class="item"><h1>12</h1></div>
      <div class="item"><h1>13</h1></div>
      <div class="item"><h1>14</h1></div>
      <div class="item"><h1>15</h1></div>
      <div class="item"><h1>16</h1></div>
    </div>

    <div id="owl-demo2" class="owl-carousel owl-theme">
      <div class="item"><h1>1</h1></div>
      <div class="item"><h1>2</h1></div>
      <div class="item"><h1>3</h1></div>
      <div class="item"><h1>4</h1></div>
      <div class="item"><h1>5</h1></div>
      <div class="item"><h1>6</h1></div>
      <div class="item"><h1>7</h1></div>
      <div class="item"><h1>8</h1></div>
      <div class="item"><h1>9</h1></div>
      <div class="item"><h1>10</h1></div>
      <div class="item"><h1>11</h1></div>
      <div class="item"><h1>12</h1></div>
      <div class="item"><h1>13</h1></div>
      <div class="item"><h1>14</h1></div>
      <div class="item"><h1>15</h1></div>
      <div class="item"><h1>16</h1></div>
    </div>
     
    <div id="owl-demo3" class="owl-carousel owl-theme">
      <div class="item"><h1>1</h1></div>
      <div class="item"><h1>2</h1></div>
      <div class="item"><h1>3</h1></div>
      <div class="item"><h1>4</h1></div>
      <div class="item"><h1>5</h1></div>
      <div class="item"><h1>6</h1></div>
      <div class="item"><h1>7</h1></div>
      <div class="item"><h1>8</h1></div>
      <div class="item"><h1>9</h1></div>
      <div class="item"><h1>10</h1></div>
      <div class="item"><h1>11</h1></div>
      <div class="item"><h1>12</h1></div>
      <div class="item"><h1>13</h1></div>
      <div class="item"><h1>14</h1></div>
      <div class="item"><h1>15</h1></div>
      <div class="item"><h1>16</h1></div>
    </div>
     

    <div class="footer-bar">
      <div class="container">
      </div>
    </div>

    <script>
    jQuery(document).ready(function () {
      
         jQuery("#owl-demo").owlCarousel({
            pagination : false,
         });
         jQuery("#owl-demo2").owlCarousel({
            pagination : false,
         });
           jQuery("#owl-demo3").owlCarousel({
            pagination : false,
         });
    });
    </script>
HTML网页中的多个轮播

1条答案

相关问题

热门标签

最新问答
