jq 实现旋转轮播图

最新推荐文章于 2022-12-17 22:46:17 发布
彻夜不归
最新推荐文章于 2022-12-17 22:46:17 发布
阅读量471
点赞数
分类专栏：通用
本文链接：https://blog.csdn.net/qq_40204835/article/details/79370419
版权
通用专栏收录该内容
7 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>首页</title>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    <style>
              body {
        background-color: #262626;
      }
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
      }
      .slide {
        width: 100%;
        min-height: 180px;
        overflow: hidden;
        position: relative;
      }
      .slide .img {
        overflow: hidden;
        position: absolute;
        transition: width 0.4s, height 0.4s, top 0.4s, left 0.4s, z-index 0.4s;
      }
      .slide .img img {
        width: calc(100% - 14px);
        height: calc(100% - 14px);
        margin: 7px;
      }
      .slide .img1 {
        width: 40%;
        height: 40%;
        top: 30%;
        left: -50%;
        z-index: 1;
      }
      .slide .img2 {
        width: 60%;
        height: 60%;
        top: 20%;
        left: -20%;
        z-index: 2;
      }
      .slide .img3 {
        width: 80%;
        height: 80%;
        top: 10%;
        left: 10%;
        z-index: 3;
      }
      .slide .img4 {
        width: 60%;
        height: 60%;
        top: 20%;
        left: 60%;
        z-index: 2;
      }
      .slide .img5 {
        width: 40%;
        height: 40%;
        top: 30%;
        left: 110%;
        z-index: 1;
      }
      .slide-bt {
        position: absolute;
        left: 50%;
        bottom: 13%;
        z-index: 10;
      }
      .slide-bt span {
        width: 24px;
        height: 8px;
        background: #c9caca;
        float: left;
        margin: 5px;
        border-radius: 4px;
      }
      .slide .slide-bt .on {
        background: #ffd200;
      }
      button {
        width: 50px;
        margin: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div id="slide" class="slide" class="index-slide" alt="star">
        <!-- 轮播图片数量可自行增减 -->
        <div class="img"><img src="image/1.png" /></div>
        <div class="img"><img src="image/2.png" /></div>
        <div class="img"><img src="image/3.png" /></div>
        <div class="img"><img src="image/4.png" /></div>
        <div class="img"><img src="image/5.png" /></div>

        <div class="slide-bt"></div>
      </div>
      <button onclick="left()">上一页</button>
      <button onclick="right()">下一页</button>
    </div>

    <script>
      var autoLb = false; //autoLb=true为开启自动轮播
      var autoLbtime = 1; //autoLbtime为轮播间隔时间（单位秒）
      var touch = true; //touch=true为开启触摸滑动
      var slideBt = true; //slideBt=true为开启滚动按钮

      var slideNub; //轮播图片数量

      //窗口大小改变时改变轮播图宽高
      $(window).resize(function() {
        $(".slide").height($(".slide").width() * 0.56);
      });

      $(function() {
        $(".slide").height($(".slide").width() * 0.56);
        slideNub = $(".slide .img").size(); //获取轮播图片数量
        for (i = 0; i < slideNub; i++) {
          $(".slide .img:eq(" + i + ")").attr("data-slide-imgId", i);
        }

        //根据轮播图片数量设定图片位置对应的class
        if (slideNub == 1) {
          for (i = 0; i < slideNub; i++) {
            $(".slide .img:eq(" + i + ")").addClass("img3");
          }
        }
        if (slideNub == 2) {
          for (i = 0; i < slideNub; i++) {
            $(".slide .img:eq(" + i + ")").addClass("img" + (i + 3));
          }
        }
        if (slideNub == 3) {
          for (i = 0; i < slideNub; i++) {
            $(".slide .img:eq(" + i + ")").addClass("img" + (i + 2));
          }
        }
        if (slideNub > 3 && slideNub < 6) {
          for (i = 0; i < slideNub; i++) {
            $(".slide .img:eq(" + i + ")").addClass("img" + (i + 1));
          }
        }
        if (slideNub >= 6) {
          for (i = 0; i < slideNub; i++) {
            if (i < 5) {
              $(".slide .img:eq(" + i + ")").addClass("img" + (i + 1));
            } else {
              $(".slide .img:eq(" + i + ")").addClass("img5");
            }
          }
        }

        //根据轮播图片数量设定轮播图按钮数量
        if (slideBt) {
          for (i = 1; i <= slideNub; i++) {
            $(".slide-bt").append(
              "<span data-slide-bt='" + i + "' onclick='tz(" + i + ")'></span>"
            );
          }
          $(".slide-bt").width(slideNub * 34);
          $(".slide-bt").css("margin-left", "-" + slideNub * 17 + "px");
        }

        //自动轮播
        if (autoLb) {
          setInterval(function() {
            right();
          }, autoLbtime * 1000);
        }

        if (touch) {
          k_touch();
        }
        slideLi();
        imgClickFy();
      });

      //右滑动
      // function right(){
      // var fy = new Array();
      // for(i=0;i<slideNub;i++){
      // fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
      // }
      // for(i=0;i<slideNub;i++){
      // if(i==0){
      // $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[slideNub-1]);
      // }else{
      // $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i-1]);
      // }
      // }
      // imgClickFy();
      // slideLi();
      // }

      //左滑动
      // function left(){
      // var fy = new Array();
      // for(i=0;i<slideNub;i++){
      // fy[i]=$(".slide .img[data-slide-imgId="+i+"]").attr("class");
      // }
      // for(i=0;i<slideNub;i++){
      // if(i==(slideNub-1)){
      // $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[0]);
      // }else{
      // $(".slide .img[data-slide-imgId="+i+"]").attr("class",fy[i+1]);
      // }
      // }
      // imgClickFy();
      // slideLi();
      // }

      //轮播图片左右图片点击翻页
      function imgClickFy() {
        $(".slide .img").removeAttr("onclick");
        $(".slide .img2").attr("onclick", "left()");
        $(".slide .img4").attr("onclick", "right()");
      }

      //修改当前最中间图片对应按钮选中状态
      function slideLi() {
        var slideList =
          parseInt($(".slide .img3").attr("data-slide-imgId")) + 1;
        $(".slide-bt span").removeClass("on");
        $(".slide-bt span[data-slide-bt=" + slideList + "]").addClass("on");
      }

      //轮播按钮点击翻页
      function tz(id) {
        var tzcs =
          id - (parseInt($(".slide .img3").attr("data-slide-imgId")) + 1);
        if (tzcs > 0) {
          for (i = 0; i < tzcs; i++) {
            setTimeout(function() {
              right();
            }, 1);
          }
        }
        if (tzcs < 0) {
          tzcs = -tzcs;
          for (i = 0; i < tzcs; i++) {
            setTimeout(function() {
              left();
            }, 1);
          }
        }
        slideLi();
      }

      //触摸滑动模块
      function k_touch() {
        var _start = 0,
          _end = 0,
          _content = document.getElementById("slide");
        _content.addEventListener("touchstart", touchStart, false);
        _content.addEventListener("touchmove", touchMove, false);
        _content.addEventListener("touchend", touchEnd, false);
        function touchStart(event) {
          var touch = event.targetTouches[0];
          _start = touch.pageX;
        }
        function touchMove(event) {
          var touch = event.targetTouches[0];
          _end = _start - touch.pageX;
        }

        function touchEnd(event) {
          if (_end < -100) {
            left();
            _end = 0;
          } else if (_end > 100) {
            right();
            _end = 0;
          }
        }
      }
    </script>
  </body>
</html>