JavaScript简单移动端自适应轮播图

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta content="yes" name="apple-mobile-web-app-capable">
  <meta content="yes" name="apple-touch-fullscreen">
  <meta content="telephone=no,email=no" name="format-detection">
  <style type="text/css">
    body,dl,h1,h3,h5,h6,hr,p,pre {
      margin:0;
    }
    th,td,input,textarea {
      padding:0;
    }
    ol,ul {
      margin:0;
      padding:0;
      list-style:none;
    }
    input,button {
      -webkit-appearance:none;
    }
    a {
      text-decoration:none;
    }
    .clearfix:after {
      content:"\200B";
      display:block;
      height:0;
      clear:both;
    }
    /*banner,滚动图*/
    .banner {
      position:relative;
      width:100%;
      height:4.1rem;
    }
    .bannerbox,.bannerindex {
      position:absolute;
    }
    .bannerbox {
      top:0;
      left:0;
      right:0;
      bottom:0;
      z-index:1;
      overflow:hidden;
    }
    .bannerlist {
      position:relative;
      width:31rem;
      overflow:hidden;
    }
    .bannerlist a {
      float:left;
    }
    .bannerlist img {
      display:block;
      width:10rem;
      height:4.11rem;
      border:none;
    }
    .bannerindex {
      right:0;
      bottom:.3rem;
      /*width:100%*/;
      z-index:2;
      font-size:0;
      text-align:center;
    }
    .bannerindex li {
      display:inline-block;
      margin:0 .16rem;
      width:.15rem;
      height:.15rem;
      border-radius:.2rem;
      background-color:#e5e5e5;
    }
    .bannerindex li.thisindex {
      background-color:#6d35cb;
    }
    .test{
      font-size: 0.2rem;
      line-height: 0.4rem;
      color: #7297FF;
      text-align: center;
    }
  </style>
  <!-- 自适应 -->
  <script type="text/javascript">
    (function (_window) {
    // 计算dpr
    var navigatorUserAgent = navigator.userAgent;
    var iPhone = navigatorUserAgent.indexOf("iPhone");
    if (iPhone > -1) {
      var dpr = Number(window.devicePixelRatio),
      one_dpr = 1 / dpr;
    } else {
      var dpr = 1,
      one_dpr = 1;
    }
    var writeText = "<meta name=\"viewport\" content=\"width=device-width,initial-scale=" + 
       one_dpr + ",maximum-scale=" + one_dpr + ",minimum-scale=" + one_dpr + ",user-scalable=no\">\n        
       <meta name=\"'flexible\" content=\"initial-dpr=" + dpr + "\">";
    document.write(writeText);
    // 计算字体大小
    var html = document.getElementsByTagName("html");
    var F0 = 75;
    html[0].setAttribute("data-dpr", dpr);
    var getFontSize = function getFontSize() {
      var windowWidth = window.innerWidth;
      html[0].style.fontSize = F0 * windowWidth / 750 + "px";
    };
    // 初始化
    getFontSize();
    _window.addEventListener("resize", getFontSize, false);
  })(window); 

</script>
</head>
<body>
  <!--轮播图-->
  <div class="banner">
    <div id="bannerbox" class="bannerbox">
      <div id="bannerlist" class="bannerlist clearfix">
        <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267189949&di=0574aa7d15bd0e2756f895c082d965c4&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F32%2F22742a569c2dfdba8d4943ab9422b024.jpg"/></a>
        <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267224293&di=3733ca596dc466534c438282bc474f0d&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F00%2F69%2F40%2F2f98a6cd604d1e03c9ec4d07db019ff0.jpg"/</a>
        <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267238025&di=798d47938625766187b325c1d7e5bf7c&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2Fqk%2Fback_origin_pic%2F00%2F02%2F73%2F22f3f0857d23a5beff98ee5d35ae4e5a.jpg"/></a>
        <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267237968&di=a0cfeba6d6385d131c9d43da1df92546&imgtype=0&src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01c70757c000b50000012e7e3b1d40.jpg%40900w_1l_2o_100sh.jpg"/></a>
        <a href="#"><img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1490267238025&di=0625f052fb428dccbadadeea05ccde32&imgtype=0&src=http%3A%2F%2Fpic.90sjimg.com%2Fback_pic%2F00%2F00%2F69%2F40%2F197fc7596ea416d86b027e3b945b6e04.jpg"/></a>
      </div>
    </div>
    <ol id="bannerindex" class="bannerindex">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ol>
  </div>
  <div class="test">banner—swiper</div>
  <!--轮播效果-->
  <script >

    var bannerList = document.getElementById("bannerlist"),
    img = bannerList.getElementsByTagName("a"),
    bannerIndex = document.getElementById("bannerindex").getElementsByTagName("li"),
        bannerBox = document.getElementById("bannerbox"); //touch事件容器
        var index = 0,
        // 当前索引
        maxIndex = img.length - 1,
        //最大索引
        classname = "thisindex";
        var setmain,
        // 轮播主体定时器
        setframe,
        // 连续运动定时器
        time = 4000,
        // 连续间隔时间
    animationIng = 0; // 判断轮播连续运动定时器是否存在
    // 速度和单位
    var velocit = 0.65;
    var metric = "rem";
    // touch事件相关函数
    var start = {};
    start.x = "";
    start.right = "";
    start.time = "";
    var end = {};
    end.x = "";
    var html = document.getElementsByTagName("html");
    // px to rem
    var px2rem = function px2rem(px) {
      return px / parseFloat(html[0].style.fontSize);
    };
    // touchstart
    var bannerStartFun = function bannerStartFun(event) {
      if (animationIng == 0) {
        animationIng = 1;
        clearTimeout(setmain);
        var e = event.touches[0];
        start.x = e.pageX;
        start.right = parseFloat(bannerList.style.right);
        start.time = +new Date();
        document.addEventListener("touchmove", bannerMoveFun, false);
        document.addEventListener("touchend", bannerEndFun, false);
      }
    };
    // touchmove
    var bannerMoveFun = function bannerMoveFun(event) {
      event.preventDefault();
      var move = function move() {
        var e = event.touches[0];
        end.x = e.pageX;
        var cha = px2rem(end.x - start.x);
        bannerList.style.right = start.right - cha + metric;
      };
      requestAnimationFrame(move);
    };
    // touchend
    var bannerEndFun = function bannerEndFun(event) {
      end.time = +new Date();
      if (end.time - start.time >= 50) {
        var cha = px2rem(end.x - start.x);
        if (Math.abs(cha) >= 2) {
          cha > 0 ? endFunB() : endFunA();
        } else {
          endFunC();
        }
      } else {
        endFunC();
      }
      document.removeEventListener("touchmove", bannerMoveFun);
      document.removeEventListener("touchend", bannerEndFun);
    };
    // touchend判断并执行相应的函数
    // 加加函数
    var endFunA = function endFunA() {
      bannerIndex[index].classList.remove(classname);
      index == maxIndex ? index = 0 : index++;
      bannerIndex[index].classList.add(classname);
      animation(20, function () {
        enlargeCallBack();
        animationIng = 0;
        setmain = setTimeout(main, time);
      });
    };
    // 减减函数
    var endFunB = function endFunB() {
      bannerIndex[index].classList.remove(classname);
      index == 0 ? index = maxIndex : index--;
      bannerIndex[index].classList.add(classname);
      animation(0, function () {
        reduceCallBack();
        animationIng = 0;
        setmain = setTimeout(main, time);
      });
    };
    // index不变的函数
    var endFunC = function endFunC() {
      animation(10, function () {
        animationIng = 0;
        setmain = setTimeout(main, time);
      });
    };
    // index++回调函数
    var enlargeCallBack = function enlargeCallBack() {
      bannerList.appendChild(img[0]);
      bannerList.style.right = "10" + metric;
    };
    // index--回调函数
    var reduceCallBack = function reduceCallBack() {
      bannerList.insertBefore(img[maxIndex], img[0]);
      bannerList.style.right = "10" + metric;
    };
    // 动画函数
    var animation = function animation(target, callback) {
      var v = "";
      var start = parseFloat(bannerList.style.right);
      start < target ? v = +velocit : v = -velocit;
      var frame = function frame() {
        var right = parseFloat(bannerList.style.right);
        if (Math.abs(target - right) > velocit) {
          bannerList.style.right = v + right + metric;
          setframe = requestAnimationFrame(frame);
        } else {
          bannerList.style.right = target + metric;
          callback ? callback() : "";
        }
      };
      setframe = requestAnimationFrame(frame);
    };
    // 轮播主函数
    var main = function main() {
      animationIng = 1;
      bannerIndex[index].classList.remove(classname);
      index == maxIndex ? index = 0 : index++;
      bannerIndex[index].classList.add(classname);
      animation(20, function () {
        enlargeCallBack();
        animationIng = 0;
        setmain = setTimeout(main, time);
      });
    };
    // 初始化
    var init = function init() {
      bannerList.insertBefore(img[maxIndex], img[0]);
      bannerList.style.right = "10" + metric;
      bannerIndex[0].classList.add(classname);
      bannerBox.addEventListener("touchstart", bannerStartFun, false);
      setmain = setTimeout(main, time);
    };
    init(); 
  </script>
  </html>

欢迎分享本文,转载请保留出处:前端ABC » JavaScript简单移动端自适应轮播图

赞 (2)
分享到:更多 ()

发表评论 0