学习笔记--轮播图

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <style type="text/css">
    * {
      margin: 0px;
      padding: 0px;
      list-style: none;
    }

    body {
      background: orange;
    }

    .screen {
      width: 700px;
      height: 438px;/*图片大小*/
      margin: 50px auto 0px;
      overflow: hidden;
      /*溢出隐藏*/
      position: relative;
    }

    .screen:hover .leftorright {
      /*鼠标移到div中 显示左右滑动按钮*/
      display: block;
      cursor: pointer;
    }

    .img {
      width: 400%;
      /*2.使得ul宽为4倍的img以便于能将4个img横着排列 */
      position: absolute;
    }

    .img li {
      float: left;
      /*1.设置浮动让其横着排列*/
    }

    .num {
      position: absolute;
      /*相对于screen进行设置*/
      bottom: 10px;
      width: 100%;
      height: 15px;
      text-align: center;
      /*使得num中的内容居中显示*/
      cursor: default;
    }

    .num li {
      width: 15px;
      height: 15px;
      border-radius: 50%;
      background: #fff;
      /*li的宽高为15 圆形显示*/
      display: inline-block;
      /*横向显示*/
      cursor: pointer;
    }

    .num li.on {
      background: #f40;
    }

    .leftorright {
      display: none;
    }

    .leftorright li {
      position: absolute;
      width: 50px;
      height: 50px;
      top: 40%;
      /*让两个都距离上40%*/
      font-size: 30PX;
      text-align: center;
      line-height: 50PX;
      color: #fff;
      background: rgba(0, 0, 0, 0.1);
    }

    .leftorright li:nth-of-type(2) {
      right: 0px;
      /*将第二个挪到右边*/
    }
  </style>
</head>

<body>
  <div class="screen">
    <ul class="img">
      <li>
        <img src="image/1.jpg" alt="">
      </li>
      <li>
        <img src="image/2.jpg" alt="">
      </li>
      <li>
        <img src="image/3.jpg" alt=""> </li>
    </ul>

    <ul class="num">
      <li class="on"></li>
      <li></li>
      <li></li>
    </ul>
    <ul class="leftorright">
      <li>&lt</li>
      <li>&gt</li>
    </ul>
    <script type="text/javascript">
      var i = 0;//计数器

      var first = $(".img li").first().clone();
      $(".img").append(first);

      $(".leftorright li:nth-of-type(1)").click(turnLeft);
      $(".leftorright li:nth-of-type(2)").click(turnRight);

      //自动轮播
      var time = setInterval(turnLeft, 1500);

      $(".screen").mouseover(function () { clearInterval(time); });
      $(".screen").mouseout(function () { time = setInterval(turnRight, 1500); });

      $(".num li").mouseenter(function () {
        i = $(this).index();
        if (i == 0 && $(".img").css("left") == -3 * 700 + "px") {
          //如果当前的是第四张图片，则不做任何响应 避免发生第一张到第四张的切换
        } else {
          $(".img").css({ left: -i * 700 + "px" });
          $(this).addClass("on").siblings().removeClass("on");
        }
      });

      function turnLeft() {
        i++;
        if (i == 4) {
          /*
          处理边界跳转的问题 当移动将要超出边界时，$(".img")回到起点，
          若是直接从第三张跳转到第一张，会出现不自然的情况
          利用视觉延迟，将第一个图像复制到整个图像的最后面（第122行）
          当划到第四张图片再往后滑动时，$(".img")跳到第一张图片，并由此向第二张图片滑动
          这样看上去就好像只有图片左滑的感觉
          具体的变化情况可以通过注释screen中的溢出隐藏，来观察
          */
          $(".img").css({ left: "0px" });
          i = 1;
        }
        $(".img").animate({ left: -i * 700 + "px" });
        //给第i个加上on样式 并删除其同级的on样式 
        $(".num li").eq(i % 3).addClass("on").siblings().removeClass("on");//i%3当到第四张图片时显示第一个点

      }

      function turnRight() {
        i--;
        if (i == -1) {//思想同左滑一样
          $(".img").css({ left: -3 * 700 + "px" });
          i = 2;
        }
        $(".img").animate({ left: -i * 700 + "px" });
        $(".num li").eq(i).addClass("on").siblings().removeClass("on");
      }
    </script>
  </div>
</body>

</html>
学习笔记--轮播图

猜你喜欢
