移动端js轮播

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>移动端轮播图</title>
  <style>
      *{
        margin: 0;
        padding: 0;
        list-style: none;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
      }

    /* 禁用iPhone中Safari的字号自动调整 */
    
    html {
        -webkit-text-size-adjust: 100%;
        -ms-text-size-adjust: 100%;
        /* 字体大小设置为 100px */
        font-size: 100px;
    }
    
    html ,body {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
    }
    
    input {
        -webkit-appearance: none;
        resize: none;
    }
    .jd-banner {
        width: 100%;
        overflow: hidden;
        position: relative;
        max-width: 7.5rem;
        margin: 0 auto;
    }
    
    .jd-banner ul:first-child {
        width: 1000%;
        overflow: hidden;
        /*显示*/
        transform: translateX(-10%);
        -webkit-transform: translateX(-10%);
    }
    
    .jd-banner ul:first-child li {
        width: 10%;
        float: left;
    }
    
    .jd-banner ul:first-child li img {
        width: 100%;
        display: block;
    }
    
    /* 小圆点 */
    
    .jd-banner ul:last-child {
        width: 1.4rem;
        height: .1rem;
        position: absolute;
        left: 50%;
        margin-left: -.6rem;
        bottom: .1rem;
    }
    
    .jd-banner ul:last-child li {
        width: .1rem;
        height: .1rem;
        margin-left: .08rem;
        border-radius: .05rem;
        border: 1px solid #fff;
        float: left;
    }
    
    .jd-banner ul:last-child li:first-child {
        margin-left: 0;
    }
    
    .jd-banner ul:last-child li.on {
        background: #fff;
    }
      </style>
</head>
<body>

        <div class="jd-banner">
            <ul>
                <li>
                    <a href="#">
                        <img src="http://img62.ddimg.cn/upload_img/00698/123/8-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img61.ddimg.cn/upload_img/00698/123/1-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img62.ddimg.cn/upload_img/00698/123/2-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img63.ddimg.cn/upload_img/00698/123/3-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img62.ddimg.cn/upload_img/00698/123/4-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img63.ddimg.cn/upload_img/00698/123/5-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img60.ddimg.cn/upload_img/00698/123/6-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img61.ddimg.cn/upload_img/00698/123/7-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img62.ddimg.cn/upload_img/00698/123/8-1525329877.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="http://img61.ddimg.cn/upload_img/00698/123/1-1525329877.jpg" alt="">
                    </a>
                </li>
            </ul>
            <ul>
                <li class="on"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
        
</body>
</html>
<script src="swipe.js"></script>
<script>
  /*轮播图*/
var scrollPic = function() {
  // banner
  var banner = document.getElementsByClassName("jd-banner")[0];
  // 图片的宽度
  var width = banner.offsetWidth;

  //图片盒子
  var imgBox = banner.getElementsByTagName("ul")[0];

  //小圆点盒子
  var pointBox = banner.getElementsByTagName("ul")[1];

  //点数组
  var pointList = pointBox.getElementsByTagName("li");

  var index = 1;
  var timer;

  var startX = 0;
  var moveX = 0;
  var endX = 0;

  //定义一个过渡函数
  var addTransition = function() {
    imgBox.style.transition = "all .3s ease 0s";
    imgBox.style.webkitTransition = "all .3s ease 0s";
  }

  //去掉过渡函数
  var removeTransition = function() {
    imgBox.style.transition = "none";
    imgBox.style.webkitTransition = "none";
  }

  //改变位置
  var setTransform = function(t) {
    imgBox.style.transform = "translate(" + t + "px)";
    imgBox.style.webkitTransform = "translate(" + t + "px)";
  }

  //小圆点变化
  var setpoint = function(n) {
    for(var i = 0; i < pointList.length; i++) {
      pointList[i].className = '';
    };
    if(n >= 9) {
      n = 1;
    } else if(n <= 0) {
      n = 8;
    }
    pointList[n - 1].className = 'on';
  }

  //定时器
  timer = setInterval(function() {
    index++;
    addTransition();
    setTransform(-index * width);
    setpoint(index);

  }, 3000)

  //监听函数

  imgBox.addEventListener('transitionEnd', function() {
    if(index >= 9) {
      index = 1;
    } else if(index <= 0) {
      index = 8;
    }

    removeTransition();
    setTransform(-index * width);

  }, 300)

  imgBox.addEventListener('webkitTransitionEnd', function() {
    if(index >= 9) {
      index = 1;
    } else if(index <= 0) {
      index = 8;
    }

    removeTransition();
    setTransform(-index * width);

  }, 300)

  //触摸事件开始
  imgBox.addEventListener('touchstart', function(e) {
    //console.log('strat');
    // 记录开始的位置
    startX = e.touches[0].clientX;
  })

  //触摸滑动事件开始
  imgBox.addEventListener('touchmove', function(e) {
    //清除定时器
    clearInterval(timer);
    // 清除默认的滚动事件
    e.preventDefault();
    // 记录开始的位置
    endX = e.touches[0].clientX;
    //记录移动的位置
    moveX = startX - endX;

    removeTransition();
    setTransform(-index * width - moveX)
  })

  //触摸滑动事件结束
  imgBox.addEventListener('touchend', function(e) {
    //如果移动的距离大雨三分之一是
    if(Math.abs(moveX) > (1 / 3 * width) && endX != 0) {
      // 向左
      if(moveX > 0) {
        index++;
      } else {
        index--;
      }
      // 改变位置
      setTransform(-index * width);
      setpoint(index);

    }

    // 回到原来的位置
    addTransition();
    setTransform(-index * width);

    startX = 0;
    endX = 0;

    clearInterval(timer);

    //定时器
    timer = setInterval(function() {
      index++;
      addTransition();
      setTransform(-index * width);
      setpoint(index);
    }, 3000)

  })

}


scrollPic();
</script>


猜你喜欢

转载自www.cnblogs.com/water-wf/p/8985395.html

相关文章