CSS百宝箱:移动端幻灯片

css 和 html都不是关键,你可以在已经写好的项目里把下面的js拷贝过去,传入容器类名就行,js我已经简单的封装了。

css的基本样式

.wrap {
    position: relative;
    overflow: hidden;
}

.box {
    position: absolute;
    list-style: none;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
}

.box li {
    float: left;
}

.box {
    position: relative;
    height: 200px;
    width: 100%;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: red;
}

html,这里图片换成自己的,类名可以更换,这里的类名和css的类名需一致(这句差不多是废话了,不过废话就废话吧,提醒一下也是比较好的):

<div class="wrap">
    <ul class="box">
        <li>
            <img src="1.png" alt="" width="100%" height="200">
        </li>
        <li>
            <!--<div class="box1 box3">2222</div>-->
            <img src="1.png" alt="" width="100%">
        </li>
        <li>
            <!--<div class="box1 box4">3333</div>-->
            <img src="1.png" alt="" width="100%">
        </li>
    </ul>
</div>

JS

appSilder('.box li', '.box', '.wrap');

/**
 * 设置移动端的图片轮播
 *
 * @param imgList 图片列表
 * @param imgBox 图片装载的容器
 * @param imgParentBox 图片展示的容器,超过展示的宽高则隐藏
 */
function appSilder(imgList, imgBox, imgParentBox) {
    var aLi = document.querySelectorAll(imgList); // 图片
    var box = document.querySelector(imgBox); // 图片父容器
    var wrap = document.querySelector(imgParentBox); // 图片真正要展示的容器
    var aLiWidth = box.offsetWidth;
    var endEl = -aLiWidth * (aLi.length - 1);
    // console.log('aLiWidth: ' + aLiWidth); // 得到容器的可视宽度

    // 初始化
    wrap.style.height = aLi[0].offsetHeight + 'px';
    // 设置盒子的宽度
    box.style.width = aLi.length * 100 + '%';// 盒子的宽度 = 所有幻灯片宽度的总和
    for (var i = 0; i < aLi.length; i++) {
        aLi[i].style.width = 1 / aLi.length * 100 + '%'; // 每个幻灯片的宽度设为百分百
    }

    // 初始化手指坐标点
    var startPoint = 0;
    var startEle = 0;
    //手指按下
    wrap.addEventListener("touchstart", function (e) {
        // console.log(e); // touch 事件对象
        startPoint = e.changedTouches[0].pageX; // 鼠标按下时的x坐标
        startEle = box.offsetLeft; // 记录盒子的左偏移量
    });
    //手指滑动
    wrap.addEventListener("touchmove", function (e) {
        // 如果偏移量是0,并且鼠标的x轴大于最开始记录的值,那就不让它滑动
        var currPoint = e.changedTouches[0].pageX; // 手指移动时的x坐标

        var disX = currPoint - startPoint;
        // console.log(startEle===endEl, disX)
        // console.log('startEle', startEle)
        if (startEle === 0 && disX > 0) {
            startEle = 0;
            return;
        } else if (startEle === endEl && disX < 0) {
            startEle = endEl;
            return;
        }

        var left = startEle + disX;
        box.style.left = left + 'px';
    });
    //当手指抬起的时候,判断图片滚动离左右的距离
    var newBoxLeft = 0; // 记录需要偏移的宽度
    wrap.addEventListener("touchend", function (e) {
        setLeft(box, aLi, aLiWidth, wrap);
    });
}


/**
 * 设置图片的最终展示
 * @param box 图片装载容器
 * @param aLi 图片列表
 * @param aLiWidth 图片的可视宽度
 * @param wrap 图片展示容器
 */
function setLeft(box, aLi, aLiWidth, wrap) {
    // console.log('进来了')
    var left = box.offsetLeft;
    // 判断正在滚动的图片距离左右图片的远近,以及是否为最后一张或者第一张
    var currNum = Math.round(-left / aLiWidth); // 当前需要展示的图片索引
    currNum = currNum >= (aLi.length - 1) ? aLi.length - 1 : currNum; // 判断是否是最后一张
    currNum = currNum <= 0 ? 0 : currNum; // 判断是否是第一张
    // box.style.left = -currNum * wrap.offsetWidth + 'px'; // 设置大容器的展示面
    newBoxLeft = -currNum * wrap.offsetWidth; // 得到当前图片索引的偏移宽度(假设当前是向左滑动,那么偏移量铁定是负值)
    // console.log(box.offsetLeft, currNum * wrap.offsetWidth) // 偏移之后

    // 伪动画
    var interval = setInterval(() => {
        if (box.offsetLeft === newBoxLeft) {
            clearInterval(interval);
            return;
        }

        left < newBoxLeft ? box.style.left = parseInt(box.style.left) + 1 + 'px' :
            box.style.left = parseInt(box.style.left) - 1 + 'px';
    }, 0);
}

此程序并不成熟,如果优化了这个程序,可以在底下评论,谢谢哈~

Last modification:April 2nd, 2018 at 09:06 pm
If you think my article is useful to you, please feel free to appreciate

One comment

  1. 菜鸟博客

    先试试再说哈!

Leave a Comment