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

h5原生js实现轮播图

预览地址: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实现轮播图