移动端仿京东轮播图实例教程

程序员文章站 2022-04-15 21:25:36

移动端仿京东轮播图 css部分 /* 轮播图 */ .jd_banner { width: 100%; overflow: hidden; position...

移动端仿京东轮播图

css部分

/* 轮播图 */

.jd_banner {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.jd_banner ul:first-child {
    width: 1000%;
    transform: translatex(-10%);
    -webkit-transform: translatex(-10%);
}

.jd_banner ul:first-child li {
    width: 10%;
    float: left;
}

.jd_banner ul:first-child li a {
    /*
     去掉下间距(三种方法)：
    1. display:block;
    2. font-size:0;
    3. vertical-align: middle
     */
    display: block;
    width: 100%;
}

.jd_banner ul:first-child li a img {
    display: block;
    width: 100%;
}

.jd_banner ul:last-child {
    width: 118px;
    height: 6px;
    position: absolute;
    left: 50%;
    margin-left: -59px;
    bottom: 6px;
}

.jd_banner ul:last-child li {
    width: 6px;
    height: 6px;
    border: 1px solid #fff;
    border-radius: 50%;
    float: left;
    margin-left: 10px;
}

.jd_banner ul:last-child li:first-child {
    margin-left: 0;
}

.jd_banner ul:last-child .now {
    background-color: #fff;
}

html部分

js部分

// 1. 自动轮播图且无缝 定时器，过渡
    // 2. 点要随着图片的轮播改变 根据索引切换
    // 3.滑动效果 利用touch事件完成
    // 4.活动结束的时候， 如果滑动的距离不超过屏幕的1/3 吸附回去 过渡
    // 5.滑动结束的时候 如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据华东的方向，过渡
var banner = function() {
    // 轮播图
    var banner = document.queryselector('.jd_banner');
    // 屏幕宽度
    var width = banner.offsetwidth;
    // 图片容器
    var imgbox = banner.queryselector('ul:first-child');
    // 点容器
    var pointbox = banner.queryselector('ul:last-child');
    // 所有的点
    var points = pointbox.queryselectorall('li');

    // 过渡
    var addtransition = function() {
        imgbox.style.transition = 'all 0.2s';
        imgbox.style.webkittranslate = 'all 0.2s';
    }

    // 位移
    var settranslatex = function(translatex) {
            imgbox.style.transform = 'translatex(' + translatex + 'px)';
            imgbox.style.webkittransform = 'translatex(' + translatex + 'px)';
        }
        // 清过渡
    var removetransition = function() {
            imgbox.style.transition = 'none';
            imgbox.style.webkittranslate = 'none';
        }
        // 程序的核心
    var index = 1; //指的是索引为1的图片 这是默认显示的第一个图片 索引为0的图片是用来做无缝滑动的 
    var timer = setinterval(function() {
        index++; //第一次执行 index=2 指的是显示索引为2的图片 就是第3张图片
        // 加过渡
        addtransition();
        // 做位移
        settranslatex(-index * width);
    }, 1000);
    // 最后一个动画结束的后 执行
    imgbox.addeventlistener('transitionend', function() {
        if (index >= 9) {
            index = 1;
            // 瞬间定位
            // 清除过渡
            removetransition();
            // 做位移
            settranslatex(-index * width);
        }
        //滑动的时候也需要做无缝
        else if (index <= 0) {
            index = 8;
            // 瞬间定位
            // 清除过渡
            removetransition();
            // 做位移
            settranslatex(-index * width);
        }
        // 根据索引设置索引点
        // 此时此刻 索引的范围是 1-8 而 索引点的范围是 0-7
        setpoints(index);
    });
    // 根据索引设置索引点
    var setpoints = function(index) { //index 范围 1-8
            // 清楚样式
            for (var i = 0; i < points.length; i++) {
                var point = points[i];
                point.classlist.remove('now');
            }
            // 给对应的添加样式
            points[index - 1].classlist.add('now');
        }
        // 绑定事件
    var startx = 0;
    var distancex = 0;
    //判断是否滑动 默认false 没有滑动
    var ismoved = false;
    imgbox.addeventlistener('touchstart', function(e) {
        // 清除自动滑动定时器
        clearinterval(timer);
        // 记录起始位置的x坐标
        startx = e.touches[0].clientx;
    });
    imgbox.addeventlistener('touchmove', function(e) {
        // 记录滑动过程中的x坐标
        var movex = e.touches[0].clientx;
        // 计算位移 有正负方向
        distancex = movex - startx;
        // 元素将要的定位 = 当前定位+手指移动距离
        var translatex = -index * width + distancex;
        // 滑动----元素随着手指的滑动做位置的改变
        removetransition();
        settranslatex(translatex);
        ismoved = true;
    });
    // 4.活动结束的时候， 如果滑动的距离不超过屏幕的1/3 吸附回去 过渡
    // 5.滑动结束的时候 如果滑动的距离超过屏幕的1/3 切换（上一张，下一张）根据滑动的方向，过渡
    imgbox.addeventlistener('touchend', function(e) {
        if (ismoved) {
            // 4 5 实现 要使用移动距离
            if (math.abs(distancex) < width / 3) {
                // 吸附回去 过渡
                addtransition();
                settranslatex(-index * width);
            } else {
                // 切换 
                // 右滑动 上一张
                if (distancex > 0) {
                    index--;
                }
                // 左滑动 下一张
                else {
                    index++;
                }
                addtransition();
                settranslatex(-index * width);
            }
        }

        // 最好做一次重置操作
        startx = 0;
        distancex = 0;
        ismoved = false;
        // 设置定时器
        clearinterval(timer);
        timer = setinterval(function() {
            index++; //第一次执行 index=2 指的是显示索引为2的图片 就是第3张图片
            // 加过渡
            addtransition();
            // 做位移
            settranslatex(-index * width);
        }, 1000);
    });

};

图片资源
l1.jp
移动端仿京东轮播图实例教程