欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-08-04 14:04:43
移动端 仿京东轮播图 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
移动端仿京东轮播图实例教程

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

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

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

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

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

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

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