移动端轮播滑动

最新推荐文章于 2022-09-30 10:51:58 发布

维克多噗噗

最新推荐文章于 2022-09-30 10:51:58 发布

阅读量999

点赞数

分类专栏：移动端轮播

本文链接：https://blog.csdn.net/qq_26766283/article/details/73195625

版权

移动端同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

轮播

1 篇文章 0 订阅

订阅专栏

布局(rem适配)

设计图宽770px

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="Author" content="">
    <meta name="Keywords" content="">
    <meta name="Description" content="">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <script>
        (function () {
            var html = document.querySelector('html');
            changeRem();
            function changeRem() {
                var width = html.getBoundingClientRect().width;
                if(width>540){
                    width = 540;
                }
                html.style.fontSize = width/10+"px";
            }
            window.onresize = function(){
                changeRem();
            }
            document.addEventListener('touchmove',function (e) {
                e.preventDefault();
            })
        })();
    </script>
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <title>rem适配轮播</title>
</head>
<body>
    <div id="slide">
        <ul>
            <li><a href=""><img src="img/slide1.jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide2.jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide3.jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide4.jpg" alt=""></a></li>
            <li><a href=""><img src="img/slide5.jpg" alt=""></a></li>
        </ul>
        <div class="dot">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>
    </div>
    <script src='js/index4.js'>
    /*
        未完成版  !! 未解决  实现慢慢滑动判断条件是滑动的距离大于一定的距离(150px) 手指快速滑动可以直接跳转
        使用 transform 改变  性能更好.有硬件加速
        但是transform 是文档流改变

        跳转条件:
            滑动的距离大于屏幕的一半
                index4.js  marginLeft来控制


            滑动的距离大于一定的距离(50px)
                index5.js  translateX来实现

        左右无缝1.html
            左右添加了图片.


        !!未解决  角度过直不触发
    */
    </script>
</body>
</html>

index.less用koala创建css

@rem:77rem;
* {margin: 0; padding: 0;}
a {text-decoration: none;}
ul,li {list-style: none;}
body {font-family: "Microsoft yahei";}

#slide {
    position: relative;
    overflow: hidden;
    max-width: 540px;
    width: 100%;
    height: 308/@rem;
    margin: 0 auto;
}
#slide ul {
    position: relative;
    width: 700%;
    height: 100%;
}
#slide ul li {
    float: left;
    width: 770/@rem;
    height: 308/@rem;
}

#slide ul li a img {
    display: block;
    width: 100%;
    height: 100%;
}
#slide .dot {
    position: absolute;
    bottom: 15/@rem;
    width: 100%;
    font-size: 0;
    text-align: center;
}
#slide .dot span {
    display: inline-block;
    width: 12/@rem;
    height: 12/@rem;
    margin: 0 10/@rem;
    border-radius: 6/@rem;
    background: rgba(255,255,255,.6);
}
#slide .dot span.on {
    background: #f60;
}

左右无缝的理解

这里写图片描述

index4.js ===> marginLeft来控制



(function () {
    var oSlide = document.querySelector('#slide'),
        oUl = document.querySelector('#slide ul'),
        oSpan = document.querySelectorAll('.dot span'),
        // 屏幕宽
        width = oSlide.offsetWidth,
        length = oUl.children.length,
        // 移动的距离
        startFinger = 0,
        marginLeft = 0,
        // 第几张
        num = 0;
    // 创建前后图片
    last = oUl.children[length-1].cloneNode(true);
    first = oUl.children[0].cloneNode(true);
    oUl.insertBefore(last,oUl.children[0]);
    oUl.appendChild(first);


    // 初始化
    length = oUl.children.length;

    change(-width);
    oSpan[0].className = 'on';

    oSlide.addEventListener('touchstart',function (e) { // 保存触摸坐标 startFinger = e.changedTouches[0].pageX; // 获取开始的marginLeft marginLeft = getStyle(oUl,'marginLeft'); oUl.style.transition = ''; });
    oSlide.addEventListener('touchmove',function (e) { var nowFinger = e.changedTouches[0].pageX, // 向左滑动 下一张 负值 distance = nowFinger - startFinger + marginLeft; change(distance); });
    oSlide.addEventListener('touchend',function (e) { // 松开 marginLeft = getStyle(oUl,'marginLeft'); // 达到宽度的一半 让它下一张 num = Math.round(marginLeft/(width)); //负值 // 松开后滑动给过渡效果 ,之前不用 oUl.style.transition = '.5s'; if(num === 0){//第一张 向前翻 change(num*width,function(){ oUl.style.transition = ''; change(-(length-2)*width) }); // 最后一张 num = -(length-2); }else if(num == -6){//最后一张 向后翻 change(num*width,function(){ oUl.style.transition = ''; change(-width); }); // 第一张 num = -1; }else{//正常情况 change(num*width); } // 按钮同步 for (var i = 0; i < oSpan.length; i++) { oSpan[i].className = ''; } console.log(num); oSpan[-num-1].className = 'on'; }) function change(value,callback){ oUl.style.marginLeft = value + "px"; setTimeout(function(){ callback&&callback(); },500) } })();


function getStyle(obj,attr){
    var value = obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    return parseInt(value);
}

index5.js===>translateX来实现


(function () {
    var oSlide = document.querySelector('#slide'),
        oUl = document.querySelector('#slide ul'),
        length = oUl.children.length,
        oSpan = document.querySelectorAll('.dot span'),
        // 屏幕宽
        width = oSlide.offsetWidth,

        // 移动的距离
        startFinger = 0,
        startX = 0,
        translateX = -width,
        distance = 0,
        num = -1; //初始 第一张 为 -1;

    // 创建前后图片
    last = oUl.children[length-1].cloneNode(true);
    first = oUl.children[0].cloneNode(true);
    oUl.insertBefore(last,oUl.children[0]);
    oUl.appendChild(first);


    // 初始化
    length = oUl.children.length;
    console.log(length);
    change(-width);
    oSpan[0].className = 'on';
    oSlide.addEventListener('touchstart',function (e) {
        // 保存触摸坐标
        startFinger = e.changedTouches[0].pageX;
        // 获取开始的marginLeft
        startX = translateX;
        oUl.style.transition = '';
    });
    oSlide.addEventListener('touchmove',function (e) {
        var nowFinger = e.changedTouches[0].pageX;
        // 移动的距离
        distance = nowFinger - startFinger;
        // 向左滑动 下一张  负值
        translateX =  nowFinger - startFinger + startX;

        change(translateX);
    });
    oSlide.addEventListener('touchend',function (e) {
        // 松开 distance大于50 下一张
        if(Math.abs(distance) > 50){ if(distance<0){ //下一张 num--; }else{//上一张 num++; } }

        translateX = num*width;
         // 松开后滑动给过渡效果 ,之前不用
        oUl.style.transition = '.5s';
        if(num === 0){//第一张 向前翻 change(translateX,function(){ oUl.style.transition = ''; translateX = -(length-2)*width; change(translateX); }); // 最后一张 num = -(length-2); }else if(num == -6){//最后一张 向后翻 change(translateX,function(){ oUl.style.transition = ''; translateX = -width; change(translateX); }); // 第一张 num = -1; }else{//正常情况 change(translateX); }

        // 按钮同步
        for (var i = 0; i < oSpan.length; i++) { oSpan[i].className = ''; } console.log(num); oSpan[-num-1].className = 'on'; })
    function change(value,callback){ oUl.style.WebkitTransform = oUl.style.transform = "translateX(" +value+ "px)"; setTimeout(function(){ callback&&callback(); },500) }
})();


function getStyle(obj,attr){
    var value = obj.currentStyle?obj.currentStyle[attr]:getComputedStyle(obj)[attr];
    return parseInt(value);
}