移动端轮播图

最新推荐文章于 2023-06-04 16:00:52 发布

TAT0_0

最新推荐文章于 2023-06-04 16:00:52 发布

阅读量519

点赞数

文章标签：移动

本文链接：https://blog.csdn.net/yesbuy201701/article/details/72974483

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>移动端轮播图</title>
        <meta name="viewport" content="width=device-width,target-densitydpi=divice-dpi ,user-scalable=no" />
    </head>
    <script>
        window.onload = function() {
            var html = document.documentElement;
            var hWidth = html.getBoundingClientRect().width;
            html.style.fontSize = hWidth / 10 + "px";
        }
    </script>
    <style>
        body {
            margin: 0;
            font-size: 0.4rem;
            background: #e1e1e1;
        }

        #picWrap {
            width: 100%;
            overflow: hidden;
        }

        #picList {
            width: 40rem;
            overflow: hidden;
            transition: 0.5s linear;
        }

        #picList a {
            float: left;
        }

        #picList img {
            width: 10rem;
        }

        #picbtns {
            margin: 0;
            padding: 0.15rem;
            height: 0.2rem;
            text-align: center;
        }

        #picbtns span {
            display: inline-block;
            width: 0.2rem;
            height: 0.2rem;
            margin: 0 0.1rem;
            vertical-align: top;
            border: 1px solid #000;
            box-sizing: border-box;
            border-radius: 0.1rem;
        }

        #picbtns .active {
            background: #f60;
        }
    </style>

    <body>
        <section id="picWrap">
            <nav id="picList">
                <a href="#1">
                    <img src="img/1.jpg" />
                </a>
                <a href="#2">
                    <img src="img/2.jpg" />
                </a>
                <a href="#3">
                    <img src="img/3.jpg" />
                </a>
                <a href="#4">
                    <img src="img/4.jpg" />
                </a>
            </nav>
        </section>
        <p id="picbtns">
            <span class="active"></span>
            <span></span>
            <span></span>
            <span></span>
        </p>
    </body>
    <script>        
        function chang() {
            var oPicList = document.getElementById('picList');
            var aBtns = document.getElementById('picbtns').children;
            //滚动坐标值
            var iScroll = 0;
            //当下图片个数
            var iNow = 0;
            //初始位置
            var iStartX = 0;
            //初始滚动距离
            var iStartScroll = 0;
            var timer = 0;
            oPicList.addEventListener('touchstart', fnstart, false);
            oPicList.addEventListener('touchmove', fnmove, false);
            oPicList.addEventListener('touchend', fnend, false);

            function fnstart(e) {
                //手指按下得到x坐标（和拖拽原理差不多）
                iStartX = e.changedTouches[0].pageX;
                iStartScroll = iScroll;
            };

            function fnmove(e) {
                //手指拖动的时候，用现在坐标减去上一个位置，得到差值
                var iDis = e.changedTouches[0].pageX - iStartX;
                //滚动的距离
                iScroll = iStartScroll + iDis;
                toStyel();
            };

            function fnend(e) {
                //手指离开屏幕判断当下是哪一张，距离前一张距离如果大于0.3倍，就翻到下一张
                var iDis = e.changedTouches[0].pageX - iStartX;
                iScroll = iStartScroll + iDis;
                iNow = -iScroll / window.screen.width;
                iNow = iNow % 1 < 0.3 ? Math.floor(iNow) : Math.ceil(iNow);
                //  判断如果是第一张和第四张不能翻
                if (iNow < 0) {
                    iNow = 0;
                } else if (iNow > aBtns.length - 1) {
                    iNow = aBtns.length - 1;
                };
                //每次翻一屏
                iScroll = -iNow * window.screen.width;
                active();
                toStyel();
            };

            function toStyel() {
                oPicList.style.WebkitTransform = "translateX(" + iScroll + "px )";
            };

            function active() {
                for (var i = 0; i < aBtns.length; i++) {
                    //按钮跟着图片走
                    if (i != iNow) {
                        aBtns[i].className = "";
                    } else {
                        aBtns[i].className = "active";
                    };
                };
            };

            //自动轮播
            function auto() {
                timer = setInterval(function() {
                    iNow++
                    if (iNow > 3) {
                        iNow = 0;
                    }
                    iScroll = -iNow * window.screen.width;
                    toStyel();
                    active();
                }, 2000);
            };
            auto();
        };
        chang();
    </script>
</html>

TAT0_0

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端轮播图

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>移动端轮播图</title> <meta name="viewport" content="width=device-width,target-densitydpi=divice-dpi ,user-scalable=no"
复制链接

扫一扫