bootstrap+jquery+轮播

aoao72

于 2022-02-27 15:52:42 发布

阅读量393

点赞数

文章标签： jquery bootstrap 前端

本文链接：https://blog.csdn.net/m0_59011179/article/details/123165411

版权

最新整理笔记，就把以前学习的轮播图发出来复习下

（鼠标放上去有停止轮播的效果）

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>

    <style>
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(-50%);
            }
        }

        .phone-main .phone-lb > div {
            overflow: hidden;
        }

        .phone-main .phone-lb > div ul {
            width: 200%;
            animation: 20s move linear infinite;
        }

        .phone-main .phone-lb > div ul:hover {
            animation-play-state: paused;
        }

        .phone-main .phone-lb > div ul li {
            width: 12.5%;
            text-align: center;
            font-size: 12px;
        }

        .phone-main .phone-lb > div ul li img {
            width: 80%;
        }
    </style>
  </head>

  <body>
    <!--主体内容-->
    <div class="phone-main">
      <div class="container">
        <!--分店轮播图-->
        <div class="phone-lb">
          <!-- 不定宽 -->
          <div class="container p-0">
            <ul class="list-unstyled clearfix m-0">
              <li class="float-left">
                <img src="./img/touch/lb01.jpeg" alt="">
                <p>分店1</p>
              </li>

              <li class="float-left">
                <img src="./img/touch/lb02.jpeg" alt="">
                <p>分店2</p>
              </li>

              <li class="float-left">
                <img src="./img/touch/lb03.jpeg" alt="">
                <p>分店3</p>
              </li>

              <li class="float-left">
                <img src="./img/touch/lb04.jpeg" alt="">
                <p>分店4</p>
              </li>

              <li class="float-left">
                <img src="./img/touch/lb05.jpeg" alt="">
                <p>分店5</p>
              </li>

              <li class="float-left">
                <img src="./img/touch/lb06.jpeg" alt="">
                <p>分店6</p>
              </li>

              <li class="float-left">
                <img src="./img/touch/lb07.jpeg" alt="">
                <p>分店7</p>
              </li>

              <li class="float-left">
                <img src="./img/touch/lb08.jpeg" alt="">
                <p>分店8</p>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>