h5原生js实现轮播图

首页 > 代码库 > h5原生js实现轮播图

2024-10-06 16:49:02 216人阅读
预览地址：http://s.xnimg.cn/a90529/wap/wechatLive/test/slide.html
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
    <title>scroll</title>
    <style>
        body,ul,li {
            padding: 0;
            margin: 0;
        }
        .con {
            width: 6.4rem;
            height:4rem;
            position: relative;
            left: 0;
            top: 0
        }
    </style>
</head>
<body>
    <div class="con"></div>
    <script>
        function slide(options) {
            var options = options || {};
            var img = options.img || [
                    ‘http://fmn.rrfmn.com/fmn070/20170518/1820/original_ouZ8_daca000044b31e7f.jpg‘,
                    ‘http://hdn.xnimg.cn/photos/hdn121/20170519/1530/h_large_O9z4_a69d000420c1195a.jpg‘,
                    ‘http://fmn.rrimg.com/fmn073/20170518/1815/original_FRpD_0db800002f041e83.jpg‘,
                    ‘http://fmn.rrimg.com/fmn077/20170428/1910/original_ogL5_c5c2000e38381e84.jpg‘,
                    ‘http://fmn.rrimg.com/fmn076/20170508/0930/original_nlQe_924f000d99bb1e83.jpg‘
                ],
            conWidth = 0,
            conHeight = 0,
            currentX = 0,
            currentY = 0,
            startX = 0,
            startY = 0,
            endX = 0,
            endY = 0,
            ulPos = 0,
            con = document.querySelector(options.className),
            imgarr = [],
            currentImg = 1,
            imgIndex = [],
            setIntervalTimer = 0,
            slideTime = options.slideTime || 3000,
            transitionTime = options.transitionTime || 500,
            imgLength = img.length;

            function init() {
                initREM();
                getConStyle();
                initDOM(img);
                initDot();
                setParentStyle();
                changeDotStyle();
                bindEvent();
                timer();
            }

            function initREM() {
                var html = document.querySelector(‘html‘);

                function setFontSize() {
                    html.style.fontSize = 0.15625 * window.innerWidth + ‘px‘;
                }
                setFontSize();

                window.onresize = setFontSize;
            }

            function initDOM(arr) {
                var html = arr.map(function(element, index) {
                    imgarr.push(index);
                    imgIndex.push(index);
                    return ‘<li style="width:‘+ conWidth +‘px;left:‘+ conWidth*(index - 1) +‘px;position:absolute;top:0;list-style-type:none;height:100%;display:inline-block;"><img src="http://www.mamicode.com/‘+ element +‘" style="width:100%;height:100%;margin:0;padding:0;"></li>‘;
                }).join(‘‘);
                document.querySelector(‘.con‘).innerHTML = ‘<ul style="width:‘+ imgLength*conWidth +‘px;height:‘+ conHeight +‘px;list-style-type:none;font-size:0;position:absolute;left:0;top:0;margin:0;padding:0" class="slide-img-con">‘+html+‘</ul>‘;
            }

            function getConStyle() {
                var con = document.querySelector(‘.con‘),
                    style = getComputedStyle(con);

                conWidth = parseFloat(style.width);
                conHeight = parseFloat(style.height);
            }

            function bindEvent() {
                con.querySelector(‘.slide-img-con‘).addEventListener(‘touchstart‘, touchStart);
                con.querySelector(‘.slide-img-con‘).addEventListener(‘touchmove‘, touchMove);
                con.querySelector(‘.slide-img-con‘).addEventListener(‘touchend‘, touchEnd);
            }

            function touchStart(e) {
                var touch = e.changedTouches[0];

                clearInterval(setIntervalTimer);
                startX = touch.pageX;
                startY = touch.pageY;

                ulPos = getULPos();

                toggleTransition();
            }

            function touchMove(e) {
                var touch = e.changedTouches[0];

                currentX = touch.pageX;
                currentY = touch.pageY;
                changeULPos(ulPos + currentX - startX);
            }

            function touchEnd(e) {
                var touch = e.changedTouches[0];

                endX = touch.pageX;
                endY = touch.pageY;

                toggleTransition(1);
                if (endX - startX > 0) {
                    right();
                } else {
                    left();
                }
                timer();
            }

            function toggleTransition(flag) {
                if (flag === 1) {
                    con.querySelector(‘.slide-img-con‘).style.transition = ‘all ‘+ transitionTime +‘ms ease-in-out‘;
                } else {
                    con.querySelector(‘.slide-img-con‘).style.transition = ‘initial‘;
                }
            }

            function getULPos() {
                var translateX = con.querySelector(‘.slide-img-con‘).style.transform;
                if (translateX) {
                    return parseFloat(translateX.split(‘translateX(‘)[1]);
                } else {
                    return 0;
                }
            }

            function changeULPos(x) {
                con.querySelector(‘.slide-img-con‘).style.transform = ‘translateX(‘+ x +‘px)‘;
            }

            function changeLiPos(num, x) {
                var domList = con.querySelectorAll(‘.slide-img-con li‘);
                domList[num].style.left = x + ‘px‘;
            }

            function getLiPos(num) {
                return parseFloat(con.querySelectorAll(‘.slide-img-con li‘)[num].style.left);
            }

            function left() {
                currentImg++;
                localImgIndex(1);
                if (!imgarr[currentImg + 1]) {
                    imgarr.push(imgarr.shift());
                    changeLiPos(imgarr[imgarr.length-1], getLiPos(imgarr[imgarr.length - 2]) + conWidth);
                    currentImg--;
                }
                changeULPos(ulPos - conWidth);
                ulPos = getULPos();
                changeDotStyle();
            }

            function right() {
                currentImg--;
                localImgIndex(-1);
                if (!imgarr[currentImg - 1]) {
                    imgarr.unshift(imgarr.pop());
                    changeLiPos(imgarr[0], getLiPos(imgarr[1]) - conWidth);
                    currentImg++;
                }
                changeULPos(ulPos + conWidth);
                ulPos = getULPos();
                changeDotStyle();
            }

            function timer() {
                setIntervalTimer =  setTimeout(function(e) {
                    toggleTransition(1);
                    left();
                    timer();
                }, slideTime);
            }

            function initDot() {
                var dom = ‘‘,
                    ul = document.createElement(‘ul‘);
                for (var i = 0; i < imgLength; i++) {
                    dom += ‘<li style="width:10px;height:10px;background:lightgrey;border-radius:5px;margin-left:5px;list-style-type:none;display:inline-block;padding:0;float:left;"></li>‘;
                }
                ul.classList.add(‘slide-img-dot‘);
                ul.style.cssText = ‘position:absolute;left:50%;top:90%;-webkit-transform:translate3d(-50%,0,0);transform:translate3d(-50%,0,0);list-style-type:none;height:10px;padding:0;margin:0;‘;
                ul.innerHTML = dom;
                con.appendChild(ul);
            }

            function changeDotStyle() {
                var dotList = document.querySelectorAll(‘.slide-img-dot li‘);
                [].slice.call(dotList).forEach(function(e, i) {
                    e.style.backgroundColor = ‘lightgrey‘;
                })
                dotList[imgIndex[0]].style.backgroundColor = ‘white‘;
            }

            function localImgIndex(flag) {
                if (flag === 1) {
                    imgIndex.push(imgIndex.shift());
                } else {
                    imgIndex.unshift(imgIndex.pop());
                }
            }

            function setParentStyle() {
                con.style.cssText+= ‘;position:relative;overflow:hidden;‘
            }

            init();
        }

        slide({
            slideTime:3000,
            transitionTime:300,
            className:‘.con‘,
            img: [
                ‘http://fmn.rrfmn.com/fmn070/20170518/1820/original_ouZ8_daca000044b31e7f.jpg‘,
                ‘http://hdn.xnimg.cn/photos/hdn121/20170519/1530/h_large_O9z4_a69d000420c1195a.jpg‘,
                ‘http://fmn.rrimg.com/fmn073/20170518/1815/original_FRpD_0db800002f041e83.jpg‘,
                ‘http://fmn.rrimg.com/fmn077/20170428/1910/original_ogL5_c5c2000e38381e84.jpg‘,
                ‘http://fmn.rrimg.com/fmn076/20170508/0930/original_nlQe_924f000d99bb1e83.jpg‘
            ]
        });
    </script>
</body>
</html>
h5原生js实现轮播图
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。
联系
我们
首页 > 代码库 > h5原生js实现轮播图

h5原生js实现轮播图

看完仍有疑问？有类似问题直接问程序猿
