移动端轮播滑动

来源：互联网发布：龙泉驾校网络预约系统编辑：程序博客网时间：2024/06/05 19:34

布局(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);}

这里写图片描述

阅读全文

0 0