移动端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>

猜你喜欢